CSS-Tutorial: Aufklappmenü (Drop-Down Menü)
silent-fran.de benutzt Cookies, um Ihnen das beste Webseiten-Erlebnis zu ermöglichen. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Weiterführende Informationen erhalten Sie in der Datenschutzerklärung.
Tutorial zum Aufbau eines Aufklappmenüs (Drop-Down Menü) nur aus HTML-Listen und CSS-Anweisungen, allerdings muss für den Internet Explorer 6 etwas nachgeholfen werden.
Die Hauptpunkte des Aufklappmenüs sind horizontal angeordnet, die Unterpunkte klappen unterhalb der Hauptpunkte aus. Die Code-Ausschnitte dieses Beispiels lassen sich problemlos an Wünsche oder gegebene Anforderungen eigener Projekte anpassen.
Vorschau des Beispiels
HTML-Code
<div id="menu"> <ul> <li class="topmenu"> <a href="">Menü 1</a> <ul> <li class="submenu"><a href="">Unterpunkt 1.1</a></li> <li class="submenu"><a href="">Unterpunkt 1.2</a></li> </ul> </li> <li class="topmenu"> <a href="">Menü 2</a> <ul> <li class="submenu"><a href="">Unterpunkt 2.1</a></li> <li class="submenu"><a href="">Unterpunkt 2.2</a></li> </ul> </li> <li class="topmenu"> <a href="">Menü 3</a> <ul> <li class="submenu"><a href="">Unterpunkt 3.1</a></li> <li class="submenu"><a href="">Unterpunkt 3.2</a></li> </ul> </li> </ul> </div>
Erläuterung des HTML-Codes:
Der Grundaufbau des CSS-Aufklappmenü (Drop-Down Menüs) besteht aus verschachtelten HTML-Listen, die die Verweise (<a>) zu den Menüpunkten enthalten.
Die verschachtelten HTML-Listen werden von einem <div>-Block umschlossen, der zur Positionierung dient.
CSS-Anweisungen
<style type="text/css"> #menu { font-size:14px; position:absolute; } #menu ul { list-style-type:none; list-style-image:none; margin:0; padding:0; } #menu li.topmenu { float:left; } .topmenu a { float:left; width:120px; text-align:center; } .topmenu ul{ display:none; } .topmenu a, .submenu a{ padding:15px; color:white; font-weight:bold; text-decoration:none; background-color:#985905; margin:0; } .submenu a{ font-size:12px; width:120px; position:relative; clear:both; /* special IE6 */ } #menu a:hover, .topmenu.on a { color:white; background-color:#BF7818 !important; } .topmenu:hover ul { display:block; z-index:500; } </style>
Erläuterung der CSS-Anweisungen:
Für den Internet Explorer 6 wird ein Skript benötigt, damit dieser auch den Mouseover-Effekt durch die CSS Pseudo-Klasse :hover bei allen HTML-Elementen interpretieren kann.
Dazu kann Whatever:hover oder ein ähnliches Skript eingesetzt werden und die CSS-Styles müssen um folgendes ergänzt werden:
* html body {behavior: url(/path/csshover3.htc);}
Anzeige