Drücke die Tasten ◄ ► für weitere Artikel  

10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobileweb-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien bzw. vor allem CSS3. Im folgenden findet ihr ansprechende Beispiele inklusive Demo und Downloadlink sowie eine Hand voll Online-Tutorials  zum Thema.

10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials
Musical Dropdown-Menü-Tutorial

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 (inkl. Tutorial)

(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)

Responsive CSS3 Dropdown-Menü Tutorial
Responsive CSS3 Dropdown-Menü Tutorial

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

(Demo | Tutorial)

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)

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 inkl. Dropdown Menü

(Demo | Tutorial)

Mobile Navigation inkl. Dropdown Menü
Mobile Navigation inkl. Dropdown Menü

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

(Demo | Tutorial)

TutsPlus Dropdown Menü mit HTML5, CSS3 und JQuery (inkl. Tutorial)
TutsPlus Dropdown Menü mit HTML5, CSS3 und JQuery (inkl. Tutorial)
157 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
16 Antworten
  1. von Nico am 09.01.2013 (11:31Uhr)

    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...

  2. von cephei am 09.01.2013 (11:48Uhr)

    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.

  3. von Björn Biege via facebook am 09.01.2013 (12:18Uhr)

    HTML5? Das ist stink normal mit jQuery in kurzer Zeit hingeklatscht. 0o

  4. von Jan Schmidt via facebook am 09.01.2013 (12:41Uhr)

    schon mal dran gedacht, dass manche kein jQuery, JS, etc nutzen möchten?

  5. von Carsten am 09.01.2013 (12:52Uhr)

    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.

  6. von Björn Biege via facebook am 09.01.2013 (12:54Uhr)

    jemand der kein JS benutzen möchte wird auch an den Tutorials keine freude haben. Die benötigen fast alle irgendwelche JS Bibliotheken. Zumal ich mich frage warum man es nicht benutzen wollen würde??

  7. von cephei am 09.01.2013 (13:16Uhr)

    @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.

  8. von Moritz am 09.01.2013 (13:33Uhr)

    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!

  9. von Karsten Unger am 09.01.2013 (13:47Uhr)

    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?

  10. von Sven am 09.01.2013 (15:00Uhr)

    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!

  11. von runG am 09.01.2013 (17:58Uhr)

    ...ist das jetzt dieses "Internetz", von dem man in letzter Zeit so viel hört...?

  12. von Arthur Končar via facebook am 09.01.2013 (22:05Uhr)

    So ein Stiefel!

  13. von Aboaktion: jQuery von Kopf bis Fuß » t… am 23.01.2013 (21:48Uhr)

    [...] 10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials [...]

  14. von seitlich am 16.03.2013 (21:38Uhr)

    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

  15. von 10 Dropdown Menus mit CSS3 und HTML5 ink… am 18.10.2013 (23:35Uhr)

    […] HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobileweb-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien bzw. vor allem CSS3.  […]

  16. von Die Mutter aller Dropdown-Menüs: Warum… am 23.10.2013 (07:57Uhr)

    […] ihr mit diesem Plugin kaum glücklich werden. In diesem Fall hilft euch vielleicht der Artikel „10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials“ […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Tutorials
Flappy Bird: So baut ihr die Game-Sensation in HTML5 nach
Flappy Bird: So baut ihr die Game-Sensation in HTML5 nach

Das Mobile-Game Flappy Bird wurde innerhalb kürzester Zeit zum Megahit. Der Entwickler Thomas Palef zeigt jetzt in einem Tutorial, wie ihr das Spiel in HTML5 nachbauen könnt. » weiterlesen

BitCast: Der Tutorial-Marktplatz im t3n-Praxistest
BitCast: Der Tutorial-Marktplatz im t3n-Praxistest

Der Tutorial-Marktplatz im t3n-Praxistest: ein Blick auf alle Tutorials, Funktionen und Möglichkeiten der Plattform BitCast aus Blick eines Beta-Testers. » weiterlesen

t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren.... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen