25 CSS Menüs (+ Animationen)

css-menues

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

Programmiert in
HTML, CSS (SCSS)

#2 Sticky Navigation Menu with Smooth Scrolling

Autor
prvnbist

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

#3 Pure CSS DropDown Menu

Autor
andornagy

Programmiert in
HTML, CSS

#4 Accessibility menu

Autor
leekiernan

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

#5 CSS Menu hover effects

Autor
sarath-ar

Programmiert in
HTML, CSS

#6 Icon Menu

Autor
gpyne

Programmiert in
HTML, CSS

#7 Snap.svg Menu animation

Autor
romagny13

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

#8 Standard Nav Bar

Autor
nilbog

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
Khaosmuhaha

Programmiert in
HTML, CSS

#11 Vertical Navigation Menu

Autor
madalintudose

Programmiert in
HTML, CSS, JS (jQuery)

#12 Portfolio Icon Nav

Autor
beteer

Programmiert in
HTML, CSS, JS (jQuery)

#13 Responsive navigation multilevel

Autor
stephaniewalter

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

#14 Nav Menu Design

Autor
billionbd

Programmiert in
HTML, CSS, JS

#15 Full page drop down – GSAP

Autor
rp20

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

#16 Lavalamp CSS Menu

Autor
Patak

Programmiert in
HTML, CSS

#17 Circle Nav

Autor
coreyroth

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

#18 Magic Line Menu

Autor
collincodes

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

#19 Sliding Menu

Autor
florian-gropp

Programmiert in
HTML, CSS, JS

#20 Another Circle Menu

Autor
Piewe

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
FUGU22

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

#23 CSS menu feat. emoji

Autor
pgalor

Programmiert in
HTML, CSS, JS

#24 Pure CSS Menu Navigation

Autor
chrysokitty

Programmiert in
HTML, CSS, JS

#25 Pure CSS Menu

Autor
icodefx

Programmiert 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

10 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