20 kreative CSS Menü Inspirationen (mit Animationen)

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!

Nachdem 55 coole CSS Buttons sehr gut bei euch ankamen und ich viel positives Feedback bekommen habe, gibt es hier die Fortsetzung: Top 20 CSS 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.

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

Verdiene Geld mit deiner Website oder Blog

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

#5 Button Menu Concept

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

#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 Standard Menu 2

Verdiene Geld mit deiner Website oder Blog

Autor: Selcuk Cura;
Programmiert in: HTML, CSS (SCSS), JS (classList.js, underscore.js, TweenMax.js, ScrambleTextPlugin.js, smooth-scroll.js);

#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 Scroll and highlight Nav

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

#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;

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:

Ähnliche Beiträge
Beteilige dich an der Unterhaltung

9 Kommentare

  1. Bertrand OREL sagt:

    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? 

    1. Lorenz sagt:

      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

  2. Emil Horowitz sagt:

    #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

    1. Lorenz sagt:

      Bei funktioniert er – vielleicht klappt es in manchen Browsern nicht. Ich nutze Google Chrome, da klappt es.

      Viele Grüße
      Lorenz

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren