Dropdown Menü mit CSS3

Veröffentlicht am

dropdown-menue-mit-css3

Häufig werden Dropdown Menüs mit Javascript umgesetzt, um eine Animation zu ermöglichen. Doch mittlerweile geht dies auch gut alleine mit CSS3. Hier zeige ich Ihnen, wie ein Dropdown Menü zu realisieren ist, dass sich mit einer auf CSS3 basierenden Animation ausklappt.
Zuerst schreiben wir eine einfache verschachtelte Liste in HTML, die wir für die horizontale und vertikale Variante verwenden können:

<ul id="nav">
    <li>
    <a href="#">Home</a>
    </li>
    <li>Kunden
        <ul>
        <li><a href="#">Privat</a></li>
        <li><a href="#">Geschäftlich</a></li>
        </ul>
    </li>
    <li>Über Uns
        <ul>
        <li><a href="#">Kontakt</a></li>
        <li>Anfahrt
            <ul>
            <li><a href="#">Zug</a></li>
            <li><a href="#">Auto</a></li>
            </ul>
        </li>
        <li><a href="#">Philosophie</a></li>
        </ul>
    </li>
</ul>
Code-Sprache: HTML, XML (xml)

Das war schon der HTML Code, ich denke, der ist vollständig selbsterklärend. So sieht das ganze bis jetzt aus:

Nun folgt noch der CSS Code, um erstmal die Unterpunkte zu verstecken:

#nav li ul,
#nav li > ul li ul{
     position:absolute;
     visibility:hidden;
     opacity:0;
}
Code-Sprache: CSS (css)

Nun haben wir die Vorraussetzungen für ein funktionierendes Dropdown Menü fast erfüllt, nun fehlt für die grobe Vorschau nur noch die CSS Angabe für den hover-Effekt:

#nav li:hover > ul,
#nav li > ul li:hover ul li{
     visibility:visible;
     opacity:1;
}
Code-Sprache: CSS (css)

Nun müssen wir die Unterpunkte noch ein wenig positionieren, damit sie auch da auftauchen, wo sie sollen. Wenn wir also der ersten Ebene eine breite von vielleicht 150px geben, müssen wir die zweite Ebene um diese 150px nach rechts oder links verschieben, je nachdem, wo sich das Menü befindet.
Ich gehe jetzt mal von dem gängigen Fall aus, dass das Menü auf der linken Seite zu finden ist. Nun muss ich der ersten Menüebene noch ein paar Eigenschaften zuweisen. Außerdem positioniere ich die Unterpunkte, setzte die Standardabstände auf Null und entferne die Listenpunkte:

li,
ul{
     padding:0;
     margin:0;
}
#nav{
     width:120px;
     position:relative;
}
#nav li{
     width:120px;
}
#nav li:hover > ul,
#nav li > ul li:hover ul li{
     visibility:visible;
     opacity:1;
     left:120px;
     top:0;
}
Code-Sprache: CSS (css)

Nun ist das ganze schon ein funktionierendes Dropdown Menü. Für eine bessere Übersichtlichkeit gebe ich den einzelnen Ebenen verschiedene Hintergrundfarben. Der ganze CSS Code sieht dann so aus (wegen besseren Aussehens habe ich bei den li-Tags ein padding eingebaut, weshalb die Breite dort von der Breite des ul-Tags abweicht):

li,
ul{
     padding:0;
     margin:0;
     color:rgba(255,255,255,1);
}
#nav a{
     color:rgba(255,255,255,1);
}
#nav{
     width:120px;
     position:relative;
     background:rgba(153,153,153,1);
     padding:0;
     margin:0;
}
#nav li{
     padding:5px 10px;
     margin:0;
     width:100px;
     list-style-type:none;
     color:rgba(255,255,255,1);
}
#nav li ul{
     background:rgba(102,102,102,1);
}
#nav li ul li ul{
     background:rgba(51,51,51,1);
}
#nav li ul,
#nav li > ul li ul{
     position:absolute;
     visibility:hidden;
     opacity:0;
     left:120px;
     top:0;
}
#nav li:hover > ul,
#nav li > ul li:hover ul li{
     visibility:visible;
     opacity:1;
}
Code-Sprache: CSS (css)

Nun kommt CSS3 mit der Eigenschaft transition ins Spiel. Der im folgenden markierte CSS Code ist für langsames Ein- und Ausblenden zuständig.

li,
ul{
     padding:0;
     margin:0;
     color:rgba(255,255,255,1);
}
#nav a{
     color:rgba(255,255,255,1);
}
#nav{
     width:120px;
     position:relative;
     background:rgba(153,153,153,1);
     padding:0;
     margin:0;
}
#nav li{
     padding:5px 10px;
     margin:0;
     width:100px;
     list-style-type:none;
     color:rgba(255,255,255,1);
}
#nav li ul{
     background:rgba(102,102,102,1);
}
#nav li ul li ul{
     background:rgba(51,51,51,1);
}
#nav li ul,
#nav li > ul li ul{
     position:absolute;
     visibility:hidden;
     opacity:0;
     left:120px;
     top:0;
     -moz-transition:all .5s ease 0s;
     -o-transition:all .5s ease 0s;
     -ms-transition:all .5s ease 0s;
     -webkit-transition:all .5s ease 0s;
     transition:all .5s ease 0s;
}
#nav li:hover > ul,
#nav li > ul li:hover ul li{
     visibility:visible;
     opacity:1;
     -moz-transition:all .5s ease;
     -o-transition:all .5s ease 0s;
     -ms-transition:all .5s ease 0s;
     -webkit-transition:all .5s ease 0s;
     transition:all .5s ease 0s;
}
Code-Sprache: CSS (css)

Transition steht einfach für Übergang, das all beschreibt, was langsam verändert werden soll, nämlich alles, was sich von normal zu hover ändert. .5s beschreibt die Dauer der Animation, ease steht für nachlassen, die Animation wird also langsamer, die abschließende Zeitangabe beschreibt die Verzögerung, mit der die Animation beginnt.
Die browserspezifischen Präfixe sollten zur Zeit noch verwendet werden, da wenige Browser bis jetzt den Befehl transition allein interpretieren können.

Das Ergebnis sieht jetzt so aus:

Beim hovern könnte beispielsweise die Hintergrundfarbe auf die Farbe der nächsttieferen Ebene wechseln, auch das kann mit dem oben genannten transition Code animiert geschehen. Wenn Sie möchten, dass die Unterebenen schnell verschwinden, ohne ausgeblendet zu werden, einfach die Zeilen 32-36 entfernen.

Horizontal

Um nun ein horizontales Menü zu realisieren, dass genau wie das vertikale Menü funktioniert, müssen wir zuerst die Punkte der ersten Ebene nebeneinander darstellen: Dies erreichen wir wie folgt:

#nav{
     position:relative;
     padding:0;
     margin:0;
}
#nav li{
     display:block;
     float:left;
     padding:5px 10px;
     background:rgba(153,153,153,1);
     margin:0;
     width:100px;
     list-style-type:none;
     color:rgba(255,255,255,1);
} #nav li ul li{
     background:rgba(102,102,102,1);
}
#nav li ul li ul li{
     background:rgba(51,51,51,1);
}
Code-Sprache: CSS (css)

Nun müssen wir noch die unteren Ebenen entsprechend platzieren. Dies geschieht mit Hilfe folgenden CSS Codes:

#nav li ul,
#nav li > ul li ul{
     position:absolute;
     visibility:hidden;
     opacity:0;
     left:0;
     top:30px;
     -moz-transition:all .5s ease 0s;
     -o-transition:all .5s ease 0s;
     -ms-transition:all .5s ease 0s;
     -webkit-transition:all .5s ease 0s;
     transition:all .5s ease 0s;
}
Code-Sprache: CSS (css)

So wie unten könnte das Ergebnis aussehen, darunter finden Sie noch einmal den gesamten CSS Code für das horizontale Dropdown Menü.

#nav a{
     color:rgba(255,255,255,1); }
#nav{
     position:relative;
     background:rgba(153,153,153,1);
     padding:0;
     margin:0;
}
#nav li{
     display:block;
     float:left;
     padding:5px 10px;
     background:rgba(153,153,153,1);
     margin:0;
     width:100px;
     list-style-type:none;
     color:rgba(255,255,255,1) !important;
}
#nav li ul li{
     background:rgba(102,102,102,1);
}
#nav li ul li ul li{
     background:rgba(51,51,51,1);
}
 #nav li ul,
#nav li > ul li ul{
     position:absolute;
     visibility:hidden;
     opacity:0;
     left:0;
     top:30px;
     -moz-transition:all .5s ease 0s;
     -o-transition:all .5s ease 0s;
     -ms-transition:all .5s ease 0s;
     -webkit-transition:all .5s ease 0s;
     transition:all .5s ease 0s;
}
#nav li:hover > ul,
#nav li > ul li:hover ul li{
     visibility:visible;
     opacity:1;
     -moz-transition:all .5s ease 0s;
     -o-transition:all .5s ease 0s;
     -ms-transition:all .5s ease 0s;
     -webkit-transition:all .5s ease 0s;
     transition:all .5s ease 0s;
}
Code-Sprache: CSS (css)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert