25 CSS Menüs (+ Animationen)

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.

#1 Cool Nav Menu Hover

Autor
hans

Progrmmiert in
HTML, CSS (SCSS)

#2 Sticky Navigation Menu with Smooth Scrolling

Autor
prvnbist

Progrmmiert in
HTML (Pug), CSS (SCSS), JS (jQuery)

#3 Pure CSS DropDown Menu

Autor
andornagy

Progrmmiert in
HTML, CSS

#4 Accessibility menu

Autor
leekiernan

Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)

#5 CSS Menu hover effects

Autor
sarath-ar

Progrmmiert in
HTML, CSS

#6 Icon Menu

Autor
gpyne

Progrmmiert in
HTML, CSS

#7 Snap.svg Menu animation

Autor
romagny13

Progrmmiert in
HTML, CSS (SCSS), JS (Snap.svg)

#8 Standard Nav Bar

Autor
nilbog

Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)

#9 Half-page Menu

Autor
mp_graphic

Progrmmiert in
HTML, CSS, JS (jQuery)

#10 CSS menu transitions

Autor
Khaosmuhaha

Progrmmiert in
HTML, CSS

#11 Vertical Navigation Menu

Progrmmiert in
HTML, CSS, JS (jQuery)

#12 Portfolio Icon Nav

Autor
beteer

Progrmmiert in
HTML, CSS, JS (jQuery)

#13 Responsive navigation multilevel

Progrmmiert in
HTML, CSS (Less), JS (jQuery)

#14 Nav Menu Design

Autor
billionbd

Progrmmiert in
HTML, CSS, JS

#15 Full page drop down – GSAP

Autor
rp20

Progrmmiert in
HTML, CSS, JS (jQuery, TweenMax.js)

#16 Lavalamp CSS Menu

Autor
Patak

Progrmmiert in
HTML, CSS

#17 Circle Nav

Autor
coreyroth

Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)

#18 Magic Line Menu

Autor
collincodes

Progrmmiert in
HTML (Pug), CSS (Stylus), JS (jQuery)

#19 Sliding Menu

Progrmmiert in
HTML, CSS, JS

#20 Another Circle Menu

Autor
Piewe

Progrmmiert in
HTML, CSS, JS

#21 Pure CSS One page vertical navigation

Autor
hrtzt

Progrmmiert in
HTML (Pug), CSS (Sass), JS

#22 CSS Menu Concept (Clip-path)

Autor
FUGU22

Progrmmiert in
HTML (Pug), CSS (Sass), JS

#23 CSS menu feat. emoji

Autor
pgalor

Progrmmiert in
HTML, CSS, JS

#24 Pure CSS Menu Navigation

Autor
chrysokitty

Progrmmiert in
HTML, CSS, JS

#25 Pure CSS Menu

Autor
icodefx

Progrmmiert in
HTML, CSS

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:

Ä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