Navigationsmenüs mit CSS
06.07.2022, 09:07 Uhr
Menüs ohne JavaScript
Eine gute Navigation ist neben der Suche eine der zentralen Funktionen für eine erfolgreiche Website.
Aufgrund der unterschiedlichen Plattformen und Browser-Generationen sollten Sie Ihre Menüs, falls Sie diese selbst entwickeln möchten, so einfach als möglich gestalten – ohne auf wichtige Funktionen zu verzichten. Wir zeigen Ihnen in diesem Workshop, wie Sie mithilfe von HTML und CSS nicht nur einfache, einstufige Menüs entwickeln, sondern diese auch problemlos über mehrere Ebenen hinweg aufbauen und umsetzen.
Einfaches Aufklappen über hover-Ereignis
Das erste Beispiel ist bewusst einfach gehalten und zeigt lediglich einen Menüpunkt sowie ein Menü, das nach unten aufklappt. Der Fokus soll an dieser Stelle auf das auslösende Element sowie die Formatierung des Menüs gesetzt werden. Hierfür ist die HTML-Struktur innerhalb des body-Tags auch so einfach wie möglich gehalten – ein Menü mit zwei Menüpunkten:
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar
