Sie sind hier: CSS / 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.

Durch die Auswahl eines Menüpunktes werden auch die Änderungen im HTML-Code sichtbar.

 
AnzahlMenüpunkt
<div class="ListHeader">
    <span>Anzahl</span>Menüpunkt
</div>
<div class="ListItem">       
    <b class="alt1"><span>Anzahl 1</span>Artikelgruppe 1</b>
    <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>

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.

<style type="text/css">
    .alt1 {
        background-color:#FFCD8B;
    }
    .alt2 {
        background-color:#F8B75F;
    }
    .ListHeader, .ListItem a, .ListItem b {
        display:block;
        padding:0.5em;
        text-decoration:none;
    }
    .ListHeader {
        border-radius:3px 3px 0 0;
        background-color:#E19938;
        color:white;
        padding:10px 15px;
        font-size:16px;
    }
    .ListItem a, .ListItem b {
        color:#BF7818;
    }
    .ListItem span, .ListHeader span {
        float:right;
        padding:0;
        text-align:right;
        width:25%;
    }
    .ListItem a:hover, .ListItem b {
        color:#FFFFFF;
        text-decoration:none;
        font-weight:normal;
    }
    .ListItem a:hover {
        background-color:#BF7818;
    }
    .ListItem b {
        background-color:#E19938;
    }
</style>

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.

Anzeige