Werbung

Zweispaltiges Auswahlmenü

Tutorial zum Aufbau eines zweispaltigen Auswahlmenüs aus HTML-Verweisen und der optischen Gestaltung per CSS-Anweisungen. Ein zweispaltige Auswahlmenü kann z.B. für eine Arikelliste genutzt werden, wobei die erste Spalte die Artikelgruppe und die zweite Spalte die Anzahl der Artikel einer Gruppe enthält. Die Code-Ausschnitte dieses Beispiels lassen sich problemlos an Wünsche oder gegebene Anforderungen eigener Projekte anpassen.

Vorschau des Beispiels

HTML-Code

<div class="ListHeader">
  <span>Anzahl</span>Menüpunkt
</div>
<div class="ListItem">
  <a href="http://www.silent-fran.de/css/tutorial/auswahlmenue.html?list=1" class="alt1">
    <span>Anzahl 1</span>Artikelgruppe 1
  </a>
  <a href="http://www.silent-fran.de/css/tutorial/auswahlmenue.html?list=2" class="alt2">
    <span>Anzahl 2</span>Artikelgruppe 2
  </a>
  <a href="http://www.silent-fran.de/css/tutorial/auswahlmenue.html?list=3" class="alt1">
    <span>Anzahl 3</span>Artikelgruppe 3
  </a>
  <a href="http://www.silent-fran.de/css/tutorial/auswahlmenue.html?list=4" class="alt2">
    <span>Anzahl 4</span>Artikelgruppe 4
  </a>
  <a href="http://www.silent-fran.de/css/tutorial/auswahlmenue.html?list=5" class="alt1">
    <span>Anzahl 5</span>Artikelgruppe 5
  </a>
  <a href="http://www.silent-fran.de/css/tutorial/auswahlmenue.html?list=6" class="alt2">
    <span>Anzahl 6</span>Artikelgruppe 6
  </a>

</div>

Erläuterung des HTML-Codes:

Der Grundaufbau des CSS-Auswahlmenüs besteht aus einer Liste von Verweisen (<a>).Dies hat den Vorteil, dass auch ältere Browser wie der Internet Explorer 6 den Mouseover-Effekt durch die CSS Pseudo-Klasse :hover interpretieren können.

Innerhalb dieser Verweise wird der Text der rechten Spalte in <span>-Tags für die Positionierung eingehüllt und die Menüpunkte als normaler Text angegeben.

Die Liste der Verweise, sowie der Menü-Kopf des Auswahlmenüs werden von separaten <div>-Blöcken eingeschlossen, um eine getrennte Gestaltung zu ermöglichen.

Der ausgewählte Menüpunkt wird nicht mehr als Verweis angezeigt, sondern nur noch mit <b>-Tags gekennzeichnet.

CSS-Anweisungen

.alt1 {
  background-color:#7F4800;
}
.alt2 {
  background-color:#E19938;
}
.ListHeader {
  border-bottom:3px solid black;
}
.ListHeader, .ListItem a, .ListItem b {
  display:block;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
}
.ListItem span, .ListHeader span {
  float:right;
  padding:0;
  text-align:right;
  width:25%;
}
.ListHeader, .ListItem a:hover, .ListItem b {
  background-color:#C37000;
  color:#FFFFFF;
}
.ListItem a:hover {
  text-decoration:underline;
}

Erläuterung der CSS-Anweisungen:

Die beiden CSS-Klassen alt1 und alt2 werden alternierend genutzt, um die einzelnen Menüpunkte durch eine unterschiedliche Hintergrundfarbe voneinander abzuheben.

Als kleine Abgrenzung zwischen dem Auswahlmenü und des Menükopfes erhält der Menükopf (.ListHeader) einen Rahmen an der Unterseite. Danach erfolgen Definitionen für das generelle Aussehen der einzelnen Menüzeilen, sowie die Verschiebung der <span>-Tags in die rechte Spalte.

Zum Abschluss wird das Aussehen bezüglich Hintergrund- und Schriftfarbe beim Mouseover-Effekt und beim ausgewählten Menüpunkt festgelegt.