Top 20 CSS Navigation Menus

Veröffentlicht am 25. Juni 2019Zuletzt aktualisiert am 22. Juni 2020

Ein guter Benutzerfluss trägt enorm zu einer erfolgreichen Website bei. Die Inhalte, Positionierung und das Aussehen sollte deshalb gut durchdacht sein. Hier findest Du einige Inspirationen für Dein eigenes Navigation Menu!

Nach dem Top 20 CSS Buttons sehr gut bei euch ankamen und ich viel positives Feedback bekommen habe, gibt es hier die Fortsetzung: Top 20 CSS Navigation Menus!

Teilweise befinden sich in dieser Liste „normale“ Menüs, aus einem ganz einfachen Grund: Die Usability steht an erster Stelle und erst dann das Aussehen. Auch „normale“ Menüleisten können sehr schick aussehen. Mit den richtigen Effekten und Animationen gespickt werden sie auch zu einem richtigen Hingucker.

Das gleiche gilt für mobile Darstellungen, gerne auch „Hamburger“ genannt. Es sind sowohl Desktop- als auch mobile Menüs vorhanden.

Alle Navigation Menus sind auf codepen.io veröffentlicht und stammen nicht von mir. Deshalb ist jeweils der Autor mit verlinkt. Let’s go!

#1 Cool Nav Menu Hover

See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.

Autor: Hans Engebretsen

#2 The real Hamburger Menu

See the Pen CSS and SVG Only: Hamburger Menu by Gabriela Johnson (@gabrielajohnson) on CodePen.

Autor: Gabriela Johnson

#3 Slide Menu

See the Pen Slide Menu by Danny Beton (@devdanny) on CodePen.

Autor: Danny Beton

#4 Accessibility menu

See the Pen Accessibility menu by Lee Kiernan (@leekiernan) on CodePen.

Autor: Lee Kiernan

#5 Button Menu Concept

See the Pen Button Menu Concept by James Truhlar (@mdcrtv) on CodePen.

Autor: James Truhlar

#6 Icon Menu

See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.

Autor: Graham Pyne

#7 Snap.svg Menu animation

See the Pen Snap.svg Menu animation by romagny jerome (@romagny13) on CodePen.

Autor: romagny jerome

#8 Standard Nav Bar

See the Pen Nav Bar by Justin (@nilbog) on CodePen.

Autor: Justin

#9 Half-page Menu

See the Pen menu by mp_graphic (@mp_graphic) on CodePen.

Autor: mp_graphic

#10 Standard Menu 2

See the Pen Portfolio interaction ideas by Selcuk Cura (@selcukcura) on CodePen.

Autor: Selcuk Cura

#11 Nested jQuery Dropdown Menu

See the Pen Nested jQuery Dropdown Menu by Dustin Dowell (@dustindowell) on CodePen.

Autor: Dustin Dowell

#12 Portfolio Icon Nav

See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.

Autor: Ridho Ahmad Batubara

#13 Fancy Hamburger Menu

See the Pen Hamburger Menu by Naim Jeem (@naimjeem) on CodePen.

Autor: Naim Jeem

#14 More fancy Menu (Hover) Styles

See the Pen Nav Menu Design by Abdullah Al Amin (@billionbd) on CodePen.

Autor: Abdullah Al Amin

#15 Another Dropdown Menu

See the Pen Full page drop down – GSAP by Rath (@rp20) on CodePen.

Autor: Rath

#16 Scroll and highlight Nav

See the Pen Scroll and highlight Nav by Jason Waller (@JasonWaller) on CodePen.

Autor: Jason Waller

#17 Circle Nav

See the Pen Circle Nav by Corey Roth (@coreyroth) on CodePen.

Autor: Corey Roth

#18 Burger Animation + Slide In Menu

See the Pen Burger Animation + Slide In Menu by Valentine (@wintr) on CodePen.

Autor: Valentine

#19 Sliding Menu

See the Pen Sliding Menu by Florian-Gropp (@florian-gropp) on CodePen.

Autor: Florian-Gropp

#20 Another Circle Menu

See the Pen circle menu by Pierre (@Piewe) on CodePen.

Autor: Pierre

Fazit

Noch nicht genug? Dann könnte das etwas für Dich sein!

• Coole CSS Buttons
• Kreative 404-Error Seiten
• Satisfying CSS Animationen

Oder.. hast Du ein eigenes fancy Menu gecodet, welches in dieser Liste erscheinen soll? Lass es mich gerne wissen! 🙂