25 kreative CSS Menüs (kreative Beispiele)

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.
Das gleiche gilt natürlich für mobile Darstellungen (responsive), gerne auch „Hamburger“ genannt. Eine große Sammlung von CSS Hamburger Menus habe ich dir auch in dem verlinkten Beitrag zusammengestellt.
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
#1 Cool Nav Menu Hover
Autor: Hans Engebretsen;
Programmiert in: HTML, CSS (SCSS);
#2 Sticky Navigation Menu with Smooth Scrolling
Autor: Praveen Bisht;
Programmiert in: HTML (Pug), CSS (SCSS), JS (jQuery);
#3 Pure CSS DropDown Menu
Autor: Andor Nagy;
Programmiert in: HTML, CSS;
#4 Accessibility menu
Autor: Lee Kiernan;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);
#5 CSS Menu hover effects
Autor: Sarath AR;
Programmiert in: HTML, CSS;
#6 Icon Menu
Autor: Graham Pyne;
Programmiert in: HTML, CSS;
#7 Snap.svg Menu animation
Autor: romagny jerome;
Programmiert in: HTML, CSS (SCSS), JS (Snap.svg);
#8 Standard Nav Bar
Autor: Justin;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);
#9 Half-page Menu
Autor: mp_graphic;
Programmiert in: HTML, CSS, JS (jQuery);
#10 CSS menu transitions
Autor: Khaos;
Programmiert in: HTML, CSS;
#11 Vertical Navigation Menu
Autor: Madalin Tudose;
Programmiert in: HTML, CSS, JS (jQuery);
#12 Portfolio Icon Nav
Autor: Ridho Ahmad Batubara;
Programmiert in: HTML, CSS, JS (jQuery);
#13 Responsive navigation multilevel
Autor: Stéphanie Walter;
Programmiert in: HTML, CSS (Less), JS (jQuery);
#14 Nav Menu Design
Autor: Abdullah Al Amin;
Programmiert in: HTML, CSS, JS;
#15 Full page drop down – GSAP
Autor: Rath;
Programmiert in: HTML, CSS, JS (jQuery, TweenMax.js);
#16 Lavalamp CSS Menu
Autor: Patak;
Programmiert in: HTML, CSS;
#17 Circle Nav
Autor: Corey Roth;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);
#18 Magic Line Menu
Autor: Collin Smith;
Programmiert in: HTML (Pug), CSS (Stylus), JS (jQuery);
#19 Sliding Menu
Autor: Florian-Gropp;
Programmiert in: HTML, CSS, JS;
#20 Another Circle Menu
Autor: Pierre;
Programmiert in: HTML, CSS, JS;
#21 Pure CSS One page vertical navigation
Autor: Hrtzt;
Programmiert in: HTML (Pug), CSS (Sass), JS;
#22 CSS Menu Concept (Clip-path)
Autor: Charlie Marcotte;
Programmiert in: HTML (Pug), CSS (Sass), JS;
#23 💪 CSS menu feat. emoji
Autor: Piotr Galor;
Programmiert in: HTML, CSS, JS;
#24 Pure CSS Menu Navigation
Autor: Izzy Skye;
Programmiert in: HTML, CSS, JS;
#25 Pure CSS Menu
Autor: Karim Khan;
Programmiert in: HTML, CSS, JS;
Fazit
Hast Du ein eigenes fancy Navigations Menu gecodet, welches in dieser Liste erscheinen soll? Lass es mich gerne wissen! 🙂
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:
Wie fandest du diesen Beitrag?


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