BenBE's humble thoughts Thoughts the world doesn't need yet …

Mit CSS löst man Probleme, die man ohne es nicht hätte. Zumindest könnte man in dieser Richtung leicht den Eindruck bekommen, wenn man sich anschaut, wieviel CSS nötig ist, um ein simples Dropdown-Menü zu erhalten, dessen sich aufklappenden Untermenüs allesamt am linken Rand des Hauptmenüs beginnen. Soweit an sich nicht schwer, lediglich, wenn dann noch hinzukommt, dass man alle Items mit ausreichend Flussmittel versehen muss, damit der letzte Menüeintrag bis zum rechten Rand aufgefüllt wird. Okay, soweit zur Aufgabe, die Umsetzung in der Praxis ist dann doch wieder einmal – wie bereits angedeutet – etwas aufwändiger, wie wir gleich sehen werden.

Als erstes müssen wir dazu unser Grundgerüst für das Menü erzeugen. Am Einfachsten realisiert sich dies mit einer Liste von DIVs:

<div class="menu">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <!-- ... -->
</div>

Um Menüeintrag und das auszuklappende Menü zu trennen ist im ersten Unter-Element der Titel des Eintrags und in einem abgetrennten eigenen Element das Untermenü untergebracht:

<div class="item">
    <div class="caption">Item 1</div>
    <div class="submenu">
        <ul>
            <li>Subitem 1</li>
        </ul>
    </div>
</div>

Soweit ist der ganze Kram noch absolut einleuchtend, chaotisch wird es erst ab dem Punkt, was man einem Browser so alles sagen muss, damit daraus der erwartete Effekt entsteht.

.menu {
    position: relative;
}
.menu .item {
    position: static;
    float: left;
}

.menu .item:last-child {
    float: none;
}

.menu .item .submenu {
    position: absolute;
    left: 0px;
    opacity: 0;
}

.menu .item:hover .submenu, .menu .item .submenu:hover {
    opacity: 100;
}

Und da das jetzt sicherlich dem einen oder anderen zu schnell ging – ich habe ungefähr 3 Tage dran gesessen, bevor es wie gewünscht lief – noch einmal in langsam zum Abschreiben 😉

Die Realisierung des Dropdown-Menüs ist einfach über die letzte CSS-Regel erledigt: Wenn sich der Cursor über dem Item ODER dem Submenu befindet, dann bitte dieses anzeigen. Andernfalls wird über die Regel darüber sichergestellt, dass keines der Menüs angezeigt wird.

Etwas komplizierter sind die Menü-Einträge: Diese werden mittels Links-Floaten in die Menüzeile aufgefädelt. Um hier einen Abschluss zu bekommen, wird das letzte Element ohne Float-Angabe direkt platziert. Dadurch erhält es genau den verbleibenden Platz auf der Zeile. Um das Floaten dynamisch zu gestalten, wird mittels des passenden CSS-Selektors automatisch das letzte Element gewählt.

Interessant wird nun der Punkt, zur Positionierung der Untermenüs: Würde man in der Klasse .item einfach position:relative; angeben, würden sich alle Positionsangaben auf den Item beziehen. In diesem Fall wollen wir aber den Parent haben. Dies erreichen wir, indem wir den Positionierungsmodus static verwenden, der dem Browser sagt, dass dieses Element in der Positionierung von relativ und absolut positionierten Elementen uninteressant ist und übersprungen werden kann. Mit diesem kleinen, aber wesentlichen Trick bezieht sich das left:0; im .submenu dann auch auf das .menu-Element und zeigt das Menü wie gewünscht an.

Ein Hinweis noch in Bezug auf Margins und Paddings in einer derart aufgebauten Menüzeile: Die Abstände können unter Umständen etwas unintuitiv wirken, da auf Grund des Floatings die vorderen Elemente als Teil des letzten Elementes dargestellt werden. Man muss also passend seine Margins und Paddings an diesen Umstand anpassen.

On Popular Request: Demo für links ausgerichtetes Menü