5em; color: white; cursor: pointer; text-decoration: none;} Button für Toggle-Menü designen Wir sehen nun 2 Dinge: aus unseren 2 Links scheint einer geworden zu sein und praktischerweise "Menü auf" der letzte Punkt in der Steuerung "Impressum" ist überdeckt vom neuen Menü-Button Das überdecken ist kein Problem, da wir eh wollen, dass die Menüpunkte unterhalb des Buttons "MENÜ auf" angezeigt werden. Javascript menü erstellen et. Also müssen diese nach unten wandern. Die einfachste Variante ist, dass der Bereich "#bereichlogo" die gesamte Breite beansprucht. Also geben wir ihm diesen: #bereichlogo { width: 100%;} die Steuerungspunkte unterhalb vom MENÜ-Button Die einzelnen Menüpunkte sollen jeweils in einer Zeile auftauchen, damit sind diese dann gut auf dem Handy antippbar. Also erweitern wir die CSS-Anweisung damit, dass die einzelnen Listenpunkte eine Breite von 100% bekommen: #steuerung li { für jeden Steuerungspunkt eine Zeile Fährt man nun mit der Maus darüber, sieht man durch das bereits zugewiesene CSS-Anweisung:hover, dass die Breite noch nicht passt.
Zusätzlich wird in der onclick-Eigenschaft die JavaScript-Funktion openTab() aufgerufen. Diese regelt das ausblenden der nicht gebrauchten und einblenden der gewünschten Tabbox. Zusätzlich wird der dazugehörige Tabreiter aktiviert und die anderen ausgegraut (passiv stellen). Im nächsten Schritt werden dann die Tab-Inhalts-Boxen angelegt tab_box_1, tab_box_2, tab_box_3. Am Schluss wird die javaScript-Funktion openTab(1) aufgerufen. Diese sagt aus, dass der User zuerst die erste Box (in meinem Fall 'Bilder') zusehen bekommt. [ERLEDIGT] - Hamburger-Menü erstellen | html.de - HTML für Anfänger und Fortgeschrittene. Soll mit der zweiten oder dritten Box begonnen werden, wird entsprechend 2 oder 3 eingesetzt. Zusätzliche Boxen erstellen: Wenn man mehr Boxen benötigt bpsw. eine vierte, fünfte und sechste, funktioniert das nach dem gleichen Schema. Der vierte Tabreiter bekommt die id tab_top_4, die onclick-Eigenschaft wird auf javascript:openTab(4) gesetzt und die Tabbox (Inhaltsbox) bekommt die id tab_box_4. usw. Css-Datei Die Css-Datei kümmert sich darum, wie die Tab-Reiter, Tab-Inhalts-Boxen und auch der Umschließende Rahmen positioniert und gestylt werden.