Werbung

Aufklappmenü (Drop-Down Menü)

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.

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

#menu {
  font-size:14px;
  position:absolute;  
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  width:110px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  border:1px solid #C37000;
  border-collapse:collapse;
  color:#C37000;
  font-weight:bold;
  text-decoration:none;
  background-color:#7F4800;
  margin:0;  
}

.submenu a{
  font-size:12px;
  width:110px;
  position:relative;
  clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#4C4C4C;
  background-color:#ffddbb !important;
}

.topmenu:hover ul {
  display:block;  
  z-index:500;
}

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);}