24 Oct, 2009
CSS Horizontaal drop-down (uitklap) navigatie
Categoriën: crossbrowser |hack |IE6 |javascript |menu |Navigation |template |valid
Een crossbrowser oplossing om een multi level drop down menu te maken, alhoewel er gebruik zal gemaakt worden van browser sniffer voor Internet Explorer 6, op basis daarvan zal een HTC bestand geladen worden om :hover ook op ander elementen te laten werken voor dit multi level drop down navigatie menu.
Download eerst deze bestanden
- csshover.htc (203)
- navdown_white.gif (212)
- nav_white.gif (158)
HTML IE6 sniffer
Plak volgende code je <head>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{
float:none;
}
body{
behavior:url(csshover.htc);
font-size:100%;
}
#menuh ul li{
float:left;
width: 100%;
}
#menuh a{
height:1%;
font:bold 0.7em/1.4em arial, sans-serif;
}
</style>
<![endif]-->
HTML
<div id="menuh-container"> <div id="menuh"> <ul> <li><a class="top_parent" href="#">Item 1</a> <ul> <li><a href="#">Sub 1:1</a></li> <li><a class="parent" href="#">Sub 1:2</a> <ul> <li><a href="#">Sub 1:2:1</a></li> <li><a href="#">Sub 1:2:2</a></li> <li><a href="#">Sub 1:2:3</a></li> <li><a href="#">Sub 1:2:4</a></li> </ul> </li> <li><a href="#">Sub 1:3</a></li> <li><a class="parent" href="#">Sub 1:4</a> <ul> <li><a href="#">Sub 1:4:1</a></li> <li><a href="#">Sub 1:4:2</a></li> <li><a href="#">Sub 1:4:3</a></li> <li><a href="#">Sub 1:4:4</a></li> </ul> </li> <li><a class="parent" href="#">Sub 1:5</a> <ul> <li><a href="#">Sub 1:5:1</a></li> <li><a href="#">Sub 1:5:2</a></li> <li><a href="#">Sub 1:5:3</a></li> <li><a href="#">Sub 1:5:4</a></li> <li><a href="#">Sub 1:5:5</a></li> </ul> </li> <li><a href="#">Sub 1:6</a></li> </ul> </li> </ul> <ul> <li><a class="top_parent" href="#">Item 2</a> <ul> <li><a href="#">Sub 2:1</a></li> <li><a class="parent" href="#">Sub 2:2</a> <ul> <li><a href="#">Sub 2:2:1</a></li> <li><a href="#">Sub 2:2:2</a></li> </ul> </li> <li><a href="#">Sub 2:3</a></li> <li><a class="parent" href="#">Sub 1:4</a> <ul> <li><a href="#">Sub 2:4:1</a></li> <li><a href="#">Sub 2:4:2</a></li> </ul> </li> <li><a class="parent" href="#">Sub 2:5</a> <ul> <li><a href="#">Sub 2:5:1</a></li> <li><a href="#">Sub 2:5:2</a></li> <li><a href="#">Sub 2:5:3</a></li> <li><a href="#">Sub 2:5:4</a></li> <li><a href="#">Sub 2:5:5</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><a class="top_parent" href="#">Item 3</a> <ul> <li><a class="parent" href="#">Sub 3:2</a> <ul> <li><a href="#">Sub 3:2:1</a></li> <li><a href="#">Sub 3:2:2</a></li> <li><a href="#">Sub 3:2:3</a></li> <li><a href="#">Sub 3:2:4</a></li> </ul> </li> <li><a class="parent" href="#">Sub 3:3</a> <ul> <li><a href="#">Sub 3:3:1</a></li> <li><a href="#">Sub 3:3:2</a></li> <li><a href="#">Sub 3:3:3</a></li> <li><a href="#">Sub 3:3:4</a></li> </ul> </li> <li><a class="parent" href="#">Sub 3:4</a> <ul> <li><a href="#">Sub 3:4:1</a></li> <li><a href="#">Sub 3:4:2</a></li> <li><a href="#">Sub 3:4:3</a></li> <li><a href="#">Sub 3:4:4</a></li> <li><a href="#">Sub 3:4:5</a></li> </ul> </li> <li><a href="#">Sub 3:5</a></li> </ul> </li> </ul> <ul> <li><a class="top_parent" href="#">Item 4</a> <ul> <li><a href="#">Sub 4:1</a></li> <li><a class="parent" href="#">Sub 4:2</a> <ul> <li><a href="#">Sub 4:2:1</a></li> <li><a href="#">Sub 4:2:2</a></li> <li><a href="#">Sub 4:2:3</a></li> <li><a href="#">Sub 4:2:4</a></li> </ul> </li> <li><a href="#">Sub 4:3</a></li> <li><a class="parent" href="#">Sub 4:4</a> <ul> <li><a href="#">Sub 4:4:1</a></li> <li><a href="#">Sub 4:4:2</a></li> <li><a href="#">Sub 4:4:3</a></li> <li><a href="#">Sub 4:4:4</a></li> <li><a href="#">Sub 4:4:5</a></li> <li><a href="#">Sub 4:4:6</a></li> <li><a href="#">Sub 4:4:7</a></li> <li><a href="#">Sub 4:4:8</a></li> <li><a href="#">Sub 4:4:9</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><a href="#">Item 5</a></li> </ul> </div> </div>
CSS
#menuh-container {
position: absolute;
top: 1em;
left: 1em;
}
#menuh {
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2.0em;
margin-top: 1.0em;
}
#menuh a {
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active {
color: white;
background-color: royalblue;
text-decoration:none;
}
/* menu on mouse-over */
#menuh a:hover {
color: #fff;
background-color: cornflowerblue;
text-decoration:none;
}
/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover {
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover {
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul {
list-style:none;
margin:0;
padding:0;
float:left;
width:9.0em; /* width of all menu boxes */
-/* NOTE: For adjustable menu boxes you can
comment out the above width rule.
However, you will have to add padding in the
"#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li {
position:relative;
min-height: 1px;
vertical-align: bottom;
}
#menuh ul ul {
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1.0em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
top:0;
left:100%;
}
div#menuh li:hover {
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
