Anzeige
Anzeige
Listicle
Artikel merken

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor allem CSS3. Im Folgenden findet ihr ansprechende Beispiele inklusive Demo und Download-Link sowie eine handvoll Online-Tutorials  zum Thema.

Von Ilja Zaglov
2 Min. Lesezeit
Anzeige
Anzeige
Tutorialzine Dropdown Menu mit CSS3. (Inkl. Tutorial)

Bildergalerie: Dropdown-Menüs:

Dropdown-Menüs: 20 Demos von simpel bis schick
Tutorialzine Dropdown Menu mit CSS3. (Inkl. Tutorial)

1 von 20

1. CSS3-Dropdown-Menü-Tutorial

(Demo | Tutorial)

 Script-Tutorials CSS3 Dropdown-Menü Tutorial

Script-Tutorials CSS3 Dropdown-Menü Tutorial

2. OurTuts-Dropdown-Menü mit HTML5 und CSS3 (inklusive Tutorial)

Anzeige
Anzeige

(Demo | Tutorial)

OurTuts DropDown-Menü mit HTML5 und CSS3 (inkl. Tutorial)

OurTuts DropDown-Menü mit HTML5 und CSS3 (inkl. Tutorial)

3. Tutorial für Responsive-Dropdown-Menü

(Demo | Tutorial)

Anzeige
Anzeige
Responsive CSS3 Dropdown-Menü Tutorial

Responsive CSS3 Dropdown-Menü Tutorial

4. Tutorial für CSS3-Dropdown-Menü von Red-Team-Design

(Demo | Tutorial)

Anzeige
Anzeige
Red-Team-Design CSS3 Dropdown-Menü-Tutorial

Red-Team-Design CSS3 Dropdown-Menü-Tutorial

5. CSS3-Dropdown-Menü-Script-Tutorials

(Demo | Tutorial)

Script-Tutorials CSS3 Dropdown-Menue

Script-Tutorials CSS3 Dropdown-Menue

6. CSS3-Dropdown-Menü-Tutorial von Designmodo

(Demo | Tutorial)

Anzeige
Anzeige
Designmodo CSS3-Dropdown-Tutorial

Designmodo CSS3-Dropdown-Tutorial

7. Musical-Dropdown-Menü-Tutorial

(Demo | Tutorial)

Musical Dropdown-Menü-Tutorial

Musical Dropdown-Menü-Tutorial

8. Webdesignerwall-CSS3-Dropdown-Menu

(Demo | Tutorial)

Webdesignerwall CSS3 Dropdown Menu

Webdesignerwall CSS3 Dropdown Menu

9. Mobile Navigation inklusive Dropdown-Menü

(Demo | Tutorial)

Anzeige
Anzeige
Mobile Navigation inkl. Dropdown Menü

Mobile Navigation inkl. Dropdown Menü

10. TutsPlus-Dropdown-Menü mit HTML5, CSS3 und JQuery (inklusive Tutorial)

(Demo | Tutorial)

TutsPlus Dropdown Menü mit HTML5, CSS3 und JQuery (inkl. Tutorial)

TutsPlus Dropdown Menü mit HTML5, CSS3 und JQuery (inkl. Tutorial)

11. Pure-CSS-Dropdown-Menu im Apple-Stil

(Demo | Tutorial)

CSS3 Dropdown Menu

Line25 Dropdown Menu mit HTML5 und CSS3. (Inkl. Tutorial)

12. CSS-Dropdown-Menu – Flat Design

(Demo | Tutorial)

Anzeige
Anzeige
CSS3 Dropdown Menu

Andor Nagy’s Dropdown Menu mit CSS3. (Inkl. Tutorial)

13. Simples CSS3-Dropdown-Menü

(Demo | Tutorial)

CSS3 Menu

Htmlgoodys.com Dropdown Menu mit CSS3. (Inkl. Tutorial)

14. Horizontales Dropdown-Menü

(Demo | Tutorial)

CSS3 Dropdown Menu

Oliver Gast’s Dropdown Menu mit CSS3. (Inkl. Tutorial)

15. Flat-Dropdown-Menu-Tutorial

(Demo/Tutorial)

Anzeige
Anzeige
CSS3 Dropdown Menu

Flat Dropdown Menu mit CSS3. (Inkl. Tutorial)

16. Animiertes CSS3-Dropdown-Menü

(Demo | Tutorial)

CSS3 Dropdown Menu

Script-tutorials.com animiertes Dropdown Menu mit CSS3. (Inkl. Tutorial)

17. CSS3-Dropdown-Menü

(Demo | Tutorial)

CSS3 Dropdown Menu

Shizoo Design Dropdown Menu mit CSS3. (Inkl. Tutorial)

18. Colorful CSS3-Animated-Menu

(Demo | Tutorial)

Anzeige
Anzeige
CSS3 Menu

Tutorialzine Dropdown Menu mit CSS3. (Inkl. Tutorial)

19. Another Simple CSS3-Dropdown-Menu

(Demo/Tutorial)

CSS3 Menu

Einfaches CSS3 Menu Beispiel auf CSSDeck.

20. CSS3-Mega-Drop-Down-Menu

(Demo | Tutorial)

CSS3 Dropdown Menu

Designmodo’s Mega Dropdown Menu mit CSS3. (Inkl. Tutorial)

Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013. Autor des Originalartikels ist Andy Lenz. Letztes Update des Artikels: 1. Juni 2014

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
23 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Nico

Das alles hat mit HTML5 nichts zu tun und funktioniert auch mit HTML4!
Nur leider ist „HTML5“ das neue Buzzwort und wird für alles Neue verwendet, leider auch von t3n…

Antworten
cephei

Wieso immer „20 jQuery Plugins“, „18 Typography Tricks“, „10 Navs“ ?

Ich glaubae es kann hier jeder eine Suchmacshine bedienen. Ihr würded besser mal nur ein einziges Tutorial nehen und das im Detail besprechen. Das schafft auch eine Basis worüber man diskutieren kann. Hier sehe ich nur Links die ich auf Google auch finde.

Antworten
Carsten

Mag zwar sein, dass sowas auch mit HTML4 geht (immerhin, Doctype von html5 und das neue Element »nav« sind vorhanden :-)). Aber »mit jQuery in kurzer Zeit hingeklatscht« ist es nicht. Das sind – bis auf ein paar Ausnahmen – CSS3 Funktionen…

Ich finde so eine Übersicht besonders gut für Anfänger. Ist man keiner und benötigt solche Tutorials nicht, wäre – neben einem unproduktiven Kommentar – die elegantere Lösung, diesen Artikel links liegen zu lassen. Auch wenn mir die Idee mit dem näher besprochenen Tutorial ebenfalls gefällt.

Antworten
cephei

@Carsten
„Die elegantere Lösung, diesen Artikel links liegen zu lassen.“
Hatte ich ja gemacht. So wie wahrscheinlich fast alle andern t3n Leser auch.

Ich finde mein Kommentar nicht unproduktiv. Er ist als Hinweis an t3n gedacht (nicht an den Author des Artikes) , dass man die Zeit besser in ein einziges, umfangreiches Tutorial investieren würde. Somit kann der „Anfänger“ auf t3n was lernen und bleibt auf der Webseite (womit t3n $$ macht) . Andere die das Ganze schon kennen, lernen sicher auch was dabei und haben auch was in den Comments zu besprechen. Darauf wollte ich hinaus.

Antworten
Moritz

Interessant wäre mal ein Artikel, ob CSS/JAVASCRIPT Dropdowns aus SEO-Sicht überhaupt sinnvoll sind bzw. auf welche Dinge man beim Einsatz von Dropdowns achten sollte.

Eine Liste mit Demos und Tutorials zu Dropdowns macht eher den Anschein eines Lückenfüllers!

Antworten
Karsten Unger

Bin technisch nicht 100%ig versiert und gerade mitten dabei eine Navigation inkl. DropDown für einen Verein zu bauen. Für mich ist die Sammlung hier wirklich hilfreich. Danke dafür!

Was mich ebenfalls sehr Interessieren würde, ist, ob die Navigationen per CSS und JS wirklich SEO schädlich sind?

Antworten
Sven

Es ist halt nunmal so, das alle „Die 10 besten x“, “ 25 blablabla“ etc. einfach massig Besuche bringen und T3n ein kommerzielles Unternehmen ist :)

Aber ja, bei google mal nach „css3 dropdown menu“ suchen bringt ohne Ende Navis wer was ganz spezielles sucht.

Und nein, aus SEO sicht sind diese „Dropdown“ Menüs nicht schädlich. Vom Code her sind es stinknormale Listen / Aufzählungen.

Also Save!

Antworten
runG

…ist das jetzt dieses „Internetz“, von dem man in letzter Zeit so viel hört…?

Antworten
Ludwig König

Und dennoch einige nette Tutorials dabei: ganz gleich ob dies auch mit HTML4, XHTML oder was weiß ich was realisierbar ist. Denn wenn ich daraus HTML5 Anwenunden machen möchte, dann nutze ich eben an den entsprechenden Stellen das jeweilige Markup.
Und außerdem: weshalb sollen denn HTML-Docs nur noch aus irgendwelchen neuen Tags bestehen wie header, article etc, sowie den Attributen? Schließlich gibt es auch noch in der aktuellen Version Elemente wie div, p und a… ;-)

Ich find die tuts dennoch lesenswert

Antworten
Sandro

HTML5 & CSS3? Alles schön und gut, aber wieso ist nur ein einziges eurer Beispiel Mobil brauchbar? Wenn eine aktuelle Sammlung mit Navigationen veröffentlicht wird gehe ich eigentlich davon aus das diese Sammlung mehr bietet als altbekanntes mit neuen Mitteln umzusetzen ohne dabei echte fortschritte zu erzielen!

Antworten
Cliparts - Designer

Danke für die Übersicht! Bin auf der Suche nach einem Drop-Down-Menü in dem unterschiedliche Sprachen zweispaltig dargestellt werden. Könnt Ihr bitte einen Tipp geben?

Antworten
Matthias Apsel

Keine der Navigationen ist tastaturbedienbar.

Antworten
Dieter Petereit

Der Beitrag ist aus 2014…

Antworten
Matthias Apsel

Das wird niemanden daran hindern, die Navigationen zu verwenden.

Dieter Petereit

Und jetzt?

Matthias Apsel

Jetzt sollte ganz nach oben ein Hinweis, dass keines dieser Beispiele die Forderungen der Zugänglichkeit erfüllt, und sie deshalb nicht verwendet werden sollten.

Dieter Petereit

Und dann setzen wir einen Mitarbeiter in Vollzeit daran, alle 21.000 Beiträge daraufhin zu untersuchen, ob irgendwo irgendwelche Hinweise anzubringen sind.

Matthias Apsel

Nein, aber die Zeit, die du hier mit der Beantwortung meiner Kommentare verwendest, hättest du für den Hinweis verwenden können. Außerdem lässt sich das sicher automatisieren.

Wenn {Artikel älter als 1 Jahr} blende Hinweis ein.

„Die Inhalte dieses Artikels sind möglicherweise nicht mehr aktuell.“

Und euer CMS lässt bestimmt auch ergänzende Hinweise zu.

Also kein Vollzeit-Mitarbeiter sondern 4-8 Stunden Programmieraufwand.

Antworten
Dieter Petereit

Alles klar. Danke dafür, dass du dich so engagierst. Medienkompetente Leser werden indes schon selbst erkennen, dass fünf Jahre alte Beiträge eventuell nicht mehr aktuell sein könnten. Und was das Thema Zugänglichkeit an sich betrifft, da gibt es ja durchaus unterschiedliche Auffassungen zu.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige