CSS dropdown navigatie
Gepost op 2 februari 2010 om 14:00u, door hiranthi | geen reacties | reageren
loading...
Dropdown navigatie is heel erg hip en niet te vergeten: heel erg handig. Je hoeft niet alle pagina's in beeld te hebben, maar wel alle pagina's zijn beschikbaar via het menu. In deze tutorial laat ik zien hoe je gemakkelijk een CSS dropdown menu kan maken die meerdere niveau's diep is (vier, inclusief de hoofdlaag, om precies te zijn).
HTML voor de navigatie
<ul id="navigatie"> <li><a href="#pagina">Geen subpagina's</a></li> <li><a href="#pagina">Twee niveau's</a><ul> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Pagina</a></li> </ul></li> <li><a href="#pagina">Drie niveau's</a><ul> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Heeft submenu</a><ul> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Pagina</a></li> </ul></li> <li><a href="#pagina">Pagina</a></li> </ul></li> <li><a href="#pagina">Vier niveau's</a><ul> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Heeft submenu</a><ul> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Heeft submenu</a><ul> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Pagina</a></li> <li><a href="#pagina">Pagina</a></li> </ul></li> <li><a href="#pagina">Pagina</a></li> </ul></li> <li><a href="#pagina">Pagina</a></li> </ul></li> </ul>
Het resultaat dat je hebt met bovenstaande HTML is het volgende:
CSS
Met alleen de HTML ziet de navigatie er nog ongelooflijk kaal uit natuurlijk. De CSS voor alle vier de niveau's:
/* navigatie - niveau 1 */ ul#navigatie { width:740px; height:40px; display:block; float:left; background:#bbb url('bg.gif') 0 0 repeat-x; } ul#navigatie li { position:relative; height:40px; display:block; float:left; } ul#navigatie li a { font-weight:bold; color:#fff; padding:12px 10px; display:block; } ul#navigatie li:hover a, ul#navigatie li a:hover { background:#bbb url('bg.gif') 0 -40px repeat-x; } /* navigatie - niveau 2 */ ul#navigatie li ul { position:absolute; top:40px; display:none; width:175px; z-index:2; } ul#navigatie li:hover ul { display:block; } ul#navigatie li ul li { clear:both; height:auto; width:100%; } ul#navigatie li:hover ul li a, ul#navigatie li ul li a { background:#efefef none; padding:10px; width:155px; display:block; color:#bbb; font-weight:normal; } ul#navigatie li ul li:hover a, ul#navigatie li ul li a:hover { background:#bbb none; color:#fff; font-style:italic; } /* navigatie - niveau 3 */ ul#navigatie li:hover ul li ul, ul#navigatie li ul li ul { position:absolute; top:0; left:175px; display:none; background:#090 none; z-index:3; } ul#navigatie li ul li:hover ul { display:block; } ul#navigatie li ul li ul li { } ul#navigatie li ul li:hover ul li a, ul#navigatie li ul li ul li a { font-style:normal; } ul#navigatie li ul li ul li:hover a, ul#navigatie li ul li ul li a:hover { background:#efefef none; color:#bbb; font-style:italic; } /* navigatie - niveau 4 */ ul#navigatie li:hover ul li ul li ul, ul#navigatie li ul li ul li ul { position:absolute; top:0; left:175px; display:none; background:#090 none; z-index:3; } ul#navigatie li ul li ul li:hover ul { display:block; } ul#navigatie li ul li ul li ul li { } ul#navigatie li ul li ul li:hover ul li a, ul#navigatie li ul li ul li ul li a { font-style:normal; } ul#navigatie li ul li ul li ul li:hover a, ul#navigatie li ul li ul li ul li a:hover { background:#bbb none; color:#fff; }
Inclusief de CSS ziet het menu er zo uit: demo CSS dropdown navigatie (opent in dit venster).
IE6 ondersteuning
IE6 ondersteund geen :hover op andere elementen dan a, het dropdown menu zal in IE6 dus niet werken.
Laat een reactie achter
Advertenties
