Frage Hilfe, Hamburger Navigation funktioniert nicht

[ww-help]

Hallo zusammen, ich bin noch am lernen von CSS/HTML und komme mit meinem Projekt einfach nicht weiter (drehe noch durch). Hab schon so manche Hamburger Navigation Version probiert, doch ich bekomm's einfach nicht auf die Reihe...

Hier mein Projekt: www.motorsport-döbeli.ch

Ab 960er Breite kommt die responsive Navigation zum Einsatz, alles tip top, wenn doch der Hamburger auch funktionieren würde!
Sogar mein Lehrer weis nicht mehr weiter...

Könnt ihr mir helfen?

Herzlichen Dank im voraus für eure Hilfe.

Grüsse

 

[SpiceLab]

Sogar mein Lehrer weis nicht mehr weiter...

Das ist aber schlecht :(

Oder ist er überhaupt nicht vom Fach, sondern schiebt nur die Vertretung für den kranken Kollegen?

Anleitungen und funktionstüchtige Demos für ein "Hamburger Menu" incl. dem Checkbox-Hack finden sich genügend im Netz - man muß sich halt nur danach auf die Suche begeben: hamburger menu checkbox hack

Und keiner von Euch beiden ist auf diese Idee gekommen? Ebenfalls schlecht :(

css-tricks.com ist seit 2007 am Start, und haben ihr Angebot quantitativ entsprechend breit aufgestellt.

Ich bin 2009 wegen der "abgerundeten Ecken ohne Grafikeinsatz" auf Rounded Corners gelandet, und die Seite in meinen Bookmarks.

Damals wurde border-radius noch nicht von allen Browsern unterstützt, wie man es heute kennt, und durfte mit ihren Präfixen rumhantieren (-moz-border-radius für Firefox, usw.)

Ich schweife ab, sorry

https://css-tricks.com/responsive-menu-concepts/ -> 3. Custom Dropdown

1. <input><label> sind innerhalb von <nav></nav> vor <ul></ul> platziert.
2. <ul> wird bei den kleinen Auflösungen per display:none ausgeblendet (und nicht die <li>'s mit top:-9999px aus dem Viewport verschoben).
3. Mit Klick auf die Checkbox wird das <ul> per display:block wieder sichtbar.

Demo für "Custom Dropdown": http://codepen.io/TimPietrusky/pen/gqlhA

Abschließend noch ein Tipp: Umlaute sollten in ID-/Klassenbezeichnern vermieden werden.

Ansonsten kommt das dabei raus, wenn die CSS-Datei nicht UTF-8-kodiert gespeichert ist:

#motorsportdöbelilogo{  /* Logo */ }

.motorsportdöbeli{  /*Schriftzug Motorsport Döbeli*/  }

@media only screen and (max-width:900px) {      /* Beginn responsive Definition für Geräte unter 900px */
  ...
  #motorsportdöbelilogo{  /* Logo */ }
}