hover dropdown menu

Door /home/joost op 24-02-2009 19:37

409 views

Beste,

Ik heb devolgende code:

<?php //kleurtjes
.menubar {
background-color: #666666;
color: #000000;
border-top: thin solid #000000;
border-bottom: thin solid #000000;
height: 16px;
}
.menu {
background-color: #666666;
float: left;
cursor: pointer;
width: auto;
padding-left: 10px;
padding-right: 10px;
}

.menu:hover {
background-color: #C1C1C1;
}

div.single_menu {
background-color: #666666;
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
}
div.single_menu:hover {
background-color: #C1C1C1;
}

.menu ul {
display: none;
position: absolute;
background-color: #666666;
color: black;
list-style: none;
padding: 0;
color: #000000;
border: thin solid #000000;
}
a.menu {
color: #000000;
text-decoration: none;
}
a.menu li {
display: block;
border: thin solid #000000;
background-color: #666666;
min-width: 100px;
color: #000000;
text-decoration: none;
}
a.menu:hover {
color: #000000;
}
div.menu:hover ul {
display: block;
margin: 0;
padding: 0;
margin-left: -10px;
}
div.menu ul li:hover {
background-color: #CCCCCC;
}
?>

Maar deze code werkt niet in (alle) versies van IE, wat moet ik aanpassen zodat het "cross-browser" word ??

mvg Joost.

Leen M

24-02-2009 20:25

IE ondersteunt alleen a:hover, niet li:hover ed. (verschillen tussen versies van IE weet ik niet precies

Je zal iets met javascript moeten doen. het volgende gebruik ik in een menu in een site waar ik mee bezig ben:

Het menu:


<ul id="nav">
  <li id="news_menu_subscr"><a href="#">Inschrijvingen</a>
    <ul class="news_sub">
	<li id="add_subscr"><a href="#">Toevoegen</a></li>
	<li id="delete_subscr"><a href="#">Verwijderen</a></li>
	<li id="download_csv"><a href="#">Downloaden</a></li>
    </ul>
  </li>
</ul>

css:


#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: 120px;
}

#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul {
left: auto;
} 
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#nav a {
display: block;
} 
#nav li {
	border-style: solid;
	border-width: 1px;
	border-color: #9D9D9D;
	padding-top: 1px;
	padding-bottom: 1px;
}
#nav li a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #333;
	text-decoration: none;
}
#nav li:hover {
	background-color: #AAA;
	border-color: #9D9D9D;
}

En de volgende javascript:


// JavaScript Document
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Volgens mij werkt dit in alle versies van IE.

Ik heb het zo gekopieerd uit de site, je moet maar even kijken hoe het in jouw geval moet en of je er iets mee kan.

Niek Weevers

24-02-2009 22:59

De manier waarop Leen het doet is goed. Met een javascript een class toevoegen aan je li. Ik doe het altijd icm jQuery.

@Joost: je code klopt niet helemaal. Zo te zien aan je css heb je li's in a's zitten. Dit mag niet en hoort ook niet. Een a moet in de li.

Reageren

Inloggen om te reageren