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

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

Autor: Hans Engebretsen;
Programmiert in: HTML, CSS (SCSS);

#2 Sticky Navigation Menu with Smooth Scrolling

See the Pen Sticky Navigation Menu With Smooth Scrolling by Praveen Bisht (@prvnbist) on CodePen.

Autor: Praveen Bisht;
Programmiert in: HTML (Pug), CSS (SCSS), JS (jQuery);

#3 Pure CSS DropDown Menu

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.

Autor: Andor Nagy;
Programmiert in: HTML, CSS;

#4 Accessibility menu

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

Autor: Lee Kiernan;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#5 CSS Menu hover effects

See the Pen CSS Menu hover effects by Sarath AR (@sarath-ar) on CodePen.

Autor: Sarath AR;
Programmiert in: HTML, CSS;

#6 Icon Menu

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

Autor: Graham Pyne;
Programmiert in: HTML, CSS;

#7 Snap.svg Menu animation

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

Autor: romagny jerome;
Programmiert in: HTML, CSS (SCSS), JS (Snap.svg);

#8 Standard Nav Bar

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

Autor: Justin;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#9 Half-page Menu

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

Autor: mp_graphic;
Programmiert in: HTML, CSS, JS (jQuery);

#10 CSS menu transitions

See the Pen CSS menu transitions by Khaos (@Khaosmuhaha) on CodePen.

Autor: Khaos;
Programmiert in: HTML, CSS;

#11 Vertical Navigation Menu

See the Pen Vertical Navigation Menu by Madalin Tudose (@madalintudose) on CodePen.

Autor: Madalin Tudose;
Programmiert in: HTML, CSS, JS (jQuery);

#12 Portfolio Icon Nav

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

Autor: Ridho Ahmad Batubara;
Programmiert in: HTML, CSS, JS (jQuery);

#13 Responsive navigation multilevel

See the Pen Responsive navigation multilevel by Stéphanie Walter (@stephaniewalter) on CodePen.

Autor: Stéphanie Walter;
Programmiert in: HTML, CSS (Less), JS (jQuery);

#14 Nav Menu Design

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

Autor: Abdullah Al Amin;
Programmiert in: HTML, CSS, JS;

#15 Full page drop down – GSAP

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

Autor: Rath;
Programmiert in: HTML, CSS, JS (jQuery, TweenMax.js);

#16 Lavalamp CSS Menu

See the Pen Lavalamp CSS Menu by Patak (@Patak) on CodePen.

Autor: Patak;
Programmiert in: HTML, CSS;

#17 Circle Nav

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

Autor: Corey Roth;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#18 Magic Line Menu

See the Pen Magic Line Menu by Collin Smith (@collincodes) on CodePen.

Autor: Collin Smith;
Programmiert in: HTML (Pug), CSS (Stylus), JS (jQuery);

#19 Sliding Menu

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

Autor: Florian-Gropp;
Programmiert in: HTML, CSS, JS;

#20 Another Circle Menu

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

Autor: Pierre;
Programmiert 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.

Autor: Hrtzt;
Programmiert in: HTML (Pug), CSS (Sass), JS;

#22 CSS Menu Concept (Clip-path)

See the Pen CSS Menu Concept (Clip-path) by Charlie Marcotte (@FUGU22) on CodePen.

Autor: Charlie Marcotte;
Programmiert in: HTML (Pug), CSS (Sass), JS;

#23 💪 CSS menu feat. emoji

See the Pen 💪 CSS menu feat. emoji by Piotr Galor (@pgalor) on CodePen.

Autor: Piotr Galor;
Programmiert in: HTML, CSS, JS;

#24 Pure CSS Menu Navigation

See the Pen Pure CSS Menu Navigation by Izzy Skye (@chrysokitty) on CodePen.

Autor: Izzy Skye;
Programmiert in: HTML, CSS, JS;

#25 Pure CSS Menu

See the Pen Pure CSS Menu by Karim Khan (@icodefx) on CodePen.

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: