Dropdown Navigation

Mittwoch 27. Mai 2020 von Torsten

Der Webdesign Workshop geht weiter und beschäftigt sich in diesem Artikel mit der Dropdown Navigation in zwei Varianten. Es wird sowohl der Klick-Dropdown als auch der Hover-Dropdown vorgestellt…

Der Klick-Dropdown:

Per Mausklick soll sich ein Dropdown-Menü öffnen – das ist die Idee hinter dieser ersten Variante des Dropdowns. Die HTML Grundlage ist eine einfache verschachtelte Liste. Der Trick ist dabei absolut einfach, denn die verschachtelte Liste wird einfach nur auf der Seite eingefügt, die den Dropdown erhalten soll.

<ul>

<li><a href=“index.html“>Startseite</a></li>

<li><a href=“fotos.html“>Fotos</a>

<ul>

<li><a href=“2014.html“>2014</a></li>

<li><a href=“2013.html“>2013</a></li>

<li><a href=“2012.html“>2012</a></li>

<li><a href=“2011.html“>2011</a></li>

</ul>

</li>

<li><a href=“links.html“>Links</a></li>

<li><a href=“mail.html“>E-Mail</a></li>

<li><a href=“hinweis.html“>Hinweis</a></li>

</ul>

In diesem Beispiel bekommt die Webseite “fotos.html“ den Dropdown als Klick-Dropdown.

Anpassungen der CSS-Dateien sind hier nicht unbedingt notwendig.

Der Hover-Dropdown:

Für den Hover-Dropdown wird die verschachtelte Liste auf jeder Webseite eingefügt und bekommt eine Spezialbehandlung per CSS.

Die CSS Anpassungen werden in der Datei “06_navibereich.css“ vorgenommen. Wer sich für andere Dateinamen entschieden hat, der wählt natürlich seinen entsprechenden Dateinamen.

nav li ul {

position: absolute;

left: -9999px;

top: -9999px;

}

nav li:hover ul {

left: 10px;

top: auto;

display: block;

width: 210px;

height: auto;

}

Mit einem kleinen Kommentar versehen können diese CSS Anweisungen am Ende der Datei und vor dem Ende von @media eingefügt werden.

Die beiden Anweisungsblöcke machen folgendes: Zuerst wird das verschachtelte Listenelement ganz weit aus dem Sichtfeld des Webbrowsers verschoben. Dies geschieht durch absolute Positionierung und diesen extremen Negativwerten von -9999 Pixel.

Der zweite CSS Anweisungsblock gestaltet jetzt den eigentlichen Hover-Effekt. Das war auch schon das Geheimnis der Dropdown Navigation.

Dieser Beitrag wurde erstellt am Mittwoch 27. Mai 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben