CSS Menü erstellen

CSS Menü/Navigation erstellen

Heute erstellen wir gemeinsam ein Menü in CSS und HTML. Bei vielen Projekte ist dies der erste logische Schritt, da die Navigationsleiste ja der erste Teil der Website ist. Ein Weg, wie du dies korrekt umsetzen kannst, zeige ich dir in heute.

Wenn dir Teile dieses Tutorials unverständlich sind, empfehle ich dir meine entsprechenden Kurse zu den Themen zu absolvieren. ? Ich verlinke diese in der Infobox.

Das Ergebnis dieses Tutorials siehst du hier.

Starten wir damit dieses Menü nun in HTML und CSS zu schreiben. Los geht’s! ?

Das Menü in HTML

Üblicherweise verwendest du für ein Menü zum einen die semantischen HTML5 Tags nav und zum anderen eine ungeordnete Liste ul.

Wenn du dir das Ergebnis im Result-Tab einmal ansiehst, stimmst du mir sicher zu, dass das noch ziemlich lahm aussieht. Sorgen wir also mit CSS dafür, dass sich dies ändert.

Das Menü in CSS

Gehen wir nun schrittweise vor, um ein übliches, horizontales Menü zu erzeugen.

Als Erstes werden wir mal die unerwünschten Aufzählungszeichen und Abstände los.

Ganz wie ein Menü sieht es jetzt nun noch nicht aus. Also geben wir dem gesamten Menü, also dem nav Element per float: right eine Anordnung nach rechts.

Nun ordnen wir das CSS-Menü bzw. die einzelnen Listenelemente li einmal so an, dass es wie ein Menü wirkt, indem wir per display: inline die Listenanordnung aufbrechen und die Elemente nebeneinander anordnen. Und mit etwas margin für die li geben wir den Elementen etwas Raum.

Standesmäßig stellt der Browser Links ja in Blau und unterstrichen da. Heben wir dies auf, indem wir den Link in dem nav Element eine andere Textfarbe und keine text-decoration zuordnen.

Nun wäre es sicher noch schön, wenn die Navigationselemente sich im Aussehen verändern, wenn wir mit der Maus drüber fahren. Dies erledigen wir mit der Pseudoklasse :hover. Außerdem nutzen wir die Pseudoklasse :active, um dem aktuellen Navigationselement (also dem Link den wir gerade im Browser sehen) eine dickere Schriftart zuzuordnen.

Die gesamte Navigationsleiste inklusive Logo in CSS

Zu einer Navigationsleiste gehört auch ein Logo. Fügen wir dieses doch ein. Als Erstes umranden wir die gesamte Navigation mit einem div, dem wir die Klasse navbar zuordnen. Dann geben wir diesem div eine andere Hintergrundfarbe und eine feste Höhe, um es besser sehen zu können.

Dabei fällt auf, dass die gesamte Navigation einen ungewollten Abstand hat, den wir per Reset im body Tag löschen.

Dabei fällt ebenfalls auf, dass unser Menü nicht vertikal zentriert in der Navigationsleiste ist. Ändern wir dies, indem wir den Links ein display: inline-block sowie ein padding-top von 15px zuordnen.

Okay, es ist Zeit das Logo per img Tag einzufügen (Dabei das alt Tag nicht vergessen). Nun braucht das Logo noch eine feste Breite und etwas padding. Tadaaaah! Unser CSS Menü ist fertig. ?

Allerdings sieht das ganze noch ziemlich halbfertig aus, wenn wir es auf einem kleineren Bildschirm, wie einem mobilen Endgerät ansehen.

Responsives CSS-Menü

Wenn wir das Browser-Fenster, also den Viewport verkleinern, überschneiden sich Logo und Navigationsleiste und die Navigation rutsch daher optisch in den Bereich unter das navbar div. Per Media Query legen wir fest, dass von einer Screen-Breite von 700px (also genau die Stelle an das Logo und Navigation sich bald überschneiden), die Navigationsleiste ein anderes Aussehen erhält.

Wir geben dem nav Element eine Breite von 100% und etwas negative margin. Dann sorgen wir bei den Listenelementen mit einem display: block dafür, dass diese wieder die volle Breite und daher Listenansicht annehmen. Damit der Bereich optisch ein und derselbe bleibt, legen wir für die Listenelemente dieselbe Hintergrundfarbe fest. Mir gefällt es besser, wenn sich die Menüpunkte dann mittig anordnen – dies schaffen wir einfach mit text-align: center.

Und schon haben wir mit wenigen Zeilen CSS ein responsives Website-Menü in CSS und HTML geschrieben. ?

Ich denke in der kommenden Woche schauen wir uns an, wie wir das Menü noch etwas verbessern können. Wenn du Verbesserungsvorschläge hast, freue ich mich sehr über einen Kommentar.

Bis bald,
Leon

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.