Frage von Noahvh, 55

Gute und einfache Responsive-Design Menü Vorlage?

Hey,

ich suche eine einfache aber schöne und kostenlose Vorlage für ein Responsive-Design Menü mit HTML, CSS, und JS. Die meisten Templates sind so lang und super kompliziert und ich möchte es auch erstmal verstehen.

Danke für alle hilfreichen Beiträge, Lg Noah.

Antwort
von AnonymerBaer, 41

Schau mal bei Bootstrap vorbei. :)

Kommentar von Noahvh ,

Ja aber da ist der Code auch wieder so lang, also von der einen Css Datei, aber man darf doch auch Bootstrap für eine geschäfftliche Seite verwenden oder?

Antwort
von janwelter, 41

Bootstrap ist ganz gut :)
Entfern Bitte den Tag Java, da das was völlig anderes wie JavaScript ist

Kommentar von Noahvh ,

Ja aber die Leute die Java können, können meist auch noch andere Sprachen, daher dachte ich ok.

Kommentar von KnusperPudding ,

Ist entfernt. 

Expertenantwort
von medmonk, Community-Experte für Computer, 44

(...) ich möchte es auch erstmal verstehen.

Wenn du es verstehen willst, solltest du dir essentielles Grundlagenwissen zu HTML, CSS und JavaScript (jQuery) aneignen. Wenn dies nicht vorhanden ist, nützen dir derartige Snippets relativ wenig. 

Was jetzt Vorlagen angeht, solltest du uns erst einmal verraten, wie deine Navigation aufgebaut ist bzw. wie viele Ebenen diese besitzt. Gibt es Dropdown-Menüs und/oder wird ein solches benötigt?  

LG medmonk 

Kommentar von Noahvh ,

Doch den HTML und Css Code kann ich ja nur bei JavaScript weiß ich nicht wo ich anfegen soll

Kommentar von Noahvh ,

Ich würde gerne ein ganz normales horizontales Menü am Pc haben, was ich auch schon geschrieben habe, aber auf mobilen Geräten soll ein Dropdown daraus werden.

Kommentar von medmonk ,

Dann solltest du dich mit Media Queries beschäftigen. Mit Hilfe dieser erstellst du Device abhängige Formatierung für die Navigation. Ein responsives Menü ist auch mit purem CSS möglich. Du solltest vor allem nach dem Mobile-first Konzept vorgehen. Die Website samt Navigation also erst für mobile Devices (Smartphone > Phablet > Tablet) umsetzen. Zu guter Letzt die Desktop-Ansicht. 

Was die Navigation selbst angeht, gibt es da sehr unterschiedliche Ansätze. Was nun genau in Frage kommt, auch von deinem Layout abhängig ist. Kannst du deinen aktuellen Stand mal zeigen, damit ich/wir mir/und mal ein Bild davon machen kann/können? So auf die schnelle mal ein Paar jQuery basierte Plugins. Wie diese eingebunden werden, kannst du den Dokumentationen entnehmen.

  1.   http://slicknav.com/
  2. http://responsive-nav.com/
  3. https://www.berriart.com/sidr/
  4. http://adnantopal.github.io/slimmenu/
  5. http://www.smartmenus.org/

Wenn das noch nicht reicht, einfach nach »jQuery responsive Nav« oder »Pure CSS3 responsive Nav« suchen. Mit Hilfe des Checkbox-Hacks kann man derartiges nämlich auch ganz ohne JS bewerkstelligen. Hat den entscheidenden Vorteil, das die Navigation auch bei deaktiviertem JS bedienbar ist.  

Keine passende Antwort gefunden?

Fragen Sie die Community