Ein guter Benutzerfluss trägt enorm zu einer erfolgreichen Website bei. Die Inhalte, Positionierung und das Aussehen deines Menüs/deiner Navigation sollte deshalb gut durchdacht sein. Hier findest du einige Inspirationen und Beispiele für dein eigenes CSS Menü!
Teilweise befinden sich in dieser Liste „normale“ CSS 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.
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
See the Pen
Nav Menu Hover by Hans Engebretsen (@hans)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
See the Pen
Sticky Navigation Menu With Smooth Scrolling by Praveen Bisht (@prvnbist)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS), JS (jQuery)
See the Pen
Pure CSS DropDown Menu by Andor Nagy (@andornagy)
on CodePen.
See the Pen
Accessibility menu by Lee Kiernan (@leekiernan)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
See the Pen
CSS Menu hover effects by Sarath AR (@sarath-ar)
on CodePen.
See the Pen
Nav/Menu Button by Graham Pyne (@gpyne)
on CodePen.
See the Pen
Snap.svg Menu animation by romagny jerome (@romagny13)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (Snap.svg)
#8 Standard Nav Bar
See the Pen
Nav Bar by Justin (@nilbog)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
See the Pen
menu by mp_graphic (@mp_graphic)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
See the Pen
CSS menu transitions by Khaos (@Khaosmuhaha)
on CodePen.
See the Pen
Vertical Navigation Menu by Madalin Tudose (@madalintudose)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
#12 Portfolio Icon Nav
See the Pen
Portfolio by Ridho Ahmad Batubara (@beteer)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
#13 Responsive navigation multilevel
See the Pen
Responsive navigation multilevel by Stéphanie Walter (@stephaniewalter)
on CodePen.
Progrmmiert in
HTML, CSS (Less), JS (jQuery)
See the Pen
Nav Menu Design by Abdullah Al Amin (@billionbd)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#15 Full page drop down – GSAP
See the Pen
Full page drop down – GSAP by Rath (@rp20)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery, TweenMax.js)
See the Pen
Lavalamp CSS Menu by Patak (@Patak)
on CodePen.
#17 Circle Nav
See the Pen
Circle Nav by Corey Roth (@coreyroth)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
See the Pen
Magic Line Menu by Collin Smith (@collincodes)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Stylus), JS (jQuery)
See the Pen
Sliding Menu by Florian-Gropp (@florian-gropp)
on CodePen.
Progrmmiert in
HTML, CSS, JS
See the Pen
circle menu by Pierre (@Piewe)
on CodePen.
Progrmmiert in
HTML, CSS, JS
#21 Pure CSS One page vertical navigation
See the Pen
Pure CSS One page vertical navigation by Hrtzt (@hrtzt)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Sass), JS
See the Pen
CSS Menu Concept (Clip-path) by Charlie Marcotte (@FUGU22)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Sass), JS
See the Pen
💪 CSS menu feat. emoji by Piotr Galor (@pgalor)
on CodePen.
Progrmmiert in
HTML, CSS, JS
See the Pen
Pure CSS Menu Navigation by Izzy Skye (@chrysokitty)
on CodePen.
Progrmmiert in
HTML, CSS, JS
See the Pen
Pure CSS Menu by Karim Khan (@icodefx)
on CodePen.
Hast Du ein eigenes CSS Menü gecodet, welches in dieser Liste erscheinen soll? Lass es mich in den Kommentaren wissen.
Ist ein „normales“ Desktop CSS Menü doch nicht das richtige? Vielleicht doch lieber ein CSS Hamburger Menü?
Hinweis: Alle Buttons sind alle auf codepen.io veröffentlicht und nicht von mir.
Noch nicht genug? Dann könnte das etwas für Dich sein:
Die demo der #9 Half-page Menu geht bei meinem Browser wunderbar. Ich habe auf meinen Rechner den Code implementiert. Der Klick auf den Hamburger bewirkt gar nichts. Versteckt sich vielleicht ein Fehler in dem Code irgendwo?
Wenn du das komplette HTML, CSS & JavaScript aus dem Pen übernommen hast muss es funktionieren. Das ist exakt der Code, der dort ausgeführt wird.
LG Lorenz
#19 Sliding Menu: Schade, funktioniert nicht. Der Klick auf den Hamburger bewirkt gar nichts. So ein Pech, das wäre wirklich schön gewesen … :-(Liebe Grüße,Emil
Bei funktioniert er – vielleicht klappt es in manchen Browsern nicht. Ich nutze Google Chrome, da klappt es.
Viele Grüße
Lorenz