Transparentes Dropdown Menü mit HTML und CSS | Tutorial

In diesem Tutorial dreht es sich um ein transparentes Menü mit Dropdown-Funktion.
Dazu mitit Background-Image als Hintergrund, um den die Transparenz besser zu erkennen.

 Transparentes Menü mit Dropdown

1. HTML-Struktur des Menüs

Zurerst die Struktur in HTML für das Dropdown Menü. Die Kategorien habe ich im Thema einer Technikseite benannt. Dazu die Unterkategorien für „Notebooks“ und „Montiore“ als weitere Aufzählungsliste in <li>.

HTML Transparentes Menü

2. CSS Grunddesign

Als nächstes gehen wir in die style.css Datei und erstellen das Design des Menüs.
Interessant sind hier zum einen „background: url(„20180925_181723.jpg“) no-repeat;“. Hier definieren wir das JPG-Bild als Hintergrund. Der Zusatz „no-repeat“ zeigt an, dass sich das Bild nicht wiederholen soll, sondern nur einmal komplett angezeigt werden soll.

Für die Transparenz ist „opacity: .8;“ entscheidend. Hier kann der Grad der Transparenz für das Menü angegeben werden.

Im nächsten Punkt geht es dan um den Dropdown und den Hovereffekt.

CSS Transparentes Menü ohne Hover

 

3. CSS Dropdown und Effekte

Was nun fehlt sind der Dropdown-Effekt, der Hover und der Mouseover-Effekt.
Mit den drei letzten Punkten im CSS definieren wir nun mit „ul li a:hover“ den Hover-Effekt mit der Farbe und dem Mouseover.
Dazu bestimmen wir mit „display:none“ das Deaktiveren der Unterkategien, welche durch den Hover „display:block“ beim Herübergehen mit der Maus wieder angezeigt werden.
Ins bestehende CSS fügen wir nun noch die drei Punkte ein und sind dann fertig mit diesem Tutorial.

Unter „Notebooks“ sind die Unterpunkte „Gaming-Notebooks“, „Convertibles“ und „Notebooks unter 400 Euro“ nur dann sichtbar, wenn man mit der Maus über die Hauptkategorie rüberfährt.

Mehr Tutorials:

Responsive Menü nur mit HTML und CSS – ohne Javascript mit CSS3