Responsives Webseiten-Menü nur mit HTML5/CSS?
Ich habe eine Webseite (http://hobbyfunk.de), welche bereits ein responsives Menü nutzt - die Ansichtumschaltung zwischen Dekstop und Mobile funktioniert. Nur: Das Menü sieht im Mobile k*cke aus ;-) Ich würde es dort gerne auf ein Hamburger-Menü umstellen.
Ich bitte um Hilfe und Unterstützung in dieser Angelegenheit. Ich kann gerne HTML und CSS zuschicken, aber nicht hier öffentlich.
Ich versuche das schon seit zwei Tagen, komme aber einfach nicht klar damit. Egal welches Beispiel ich im Netz gefunden haben und welches ich versuche zu adaptieren - immer klappt irgendwas nicht.
Ja, ich kann lesen, ja ich kann im Netz suchen, und ja ich habe schon einiges gefunden. Wenn dem nicht so wäre, würde ich hier nicht um Hilfe rufen ;-)
Was meinst du genau mit ich will es auf Hamburg-menü umstellen?
in nahezu jedem Artikel welche ich gelesen habe, wir das Drei-Striche-Navigations-Menü als "Hamburger-Menü "oder "Burger-Menü" bezeichnet.
Das Drei Striche-Navigationsmenü eben
2 Antworten
Ein ganz simples kann z.b. so aussehen:
Du nimmst deine nav, kopierst den und packst in die Kopie ein <details> drum herum. Beim <details> Tag kann man den Inhalt nämlich auf und zuklappen ohne Umwege. Für die Beschreibung packt man unter dem <details> tag ein <summary> tag, da kommt dann das Bild vom Hamburger menu rein also
<summary><img src="HOBBYFUNK.DE%20-%20Alles%20rund%20um's%20Hobby%20'Funk'-Dateien/menuicon.png"></summary>
Um den Pfeil weg zu bekommen gibt es folgendes CSS:
summary {
list-style-type: none;
}
So wird der Pfeil ausgeblendet und nur das Bild angezeigt.
Dann hast du 2 Menüs einmal das normale und einmal das Hamburger Menü was man per CSS abwechselnd ein und ausblenden kann also wenn der Nutzer am Desktop PC ist wird das mobile per CSS einfach ausgeblendet und andersherum
Ich hab <details open> gefunden. Aber das ist auch wieder eine statische Voreinstellung. Wie kann ich das eben bei unterschiedlichen Bildschirmbreiten unterschiedlich behandeln? Also bei unter 640 eben das Menü zugeklappt und bei über 640 aufgeklappt?
CSS only ist mir nichts bekannt aber mit einem kleinen Scriptchen geht das problemlos
<script>
"use strict";
var menu = document.getElementById("menu");
var height = window.innerHeight;
if (height > 640) {
menu.setAttribute("open", "");
} else {
menu.removeAttribute("open");
}
</script>
Das Script holt sich den <details> tag über die ID (musst natürlich deine angeben) und prüft dann die innere höhe des Fensters. Ist die größer als 640 wird das open Attribut hinzugefügt ansonsten entfernt falls vorhanden.
window.innerHeight ist die höhe, window.innerWidth die breite.
Doppelsuper! JavaScript ist kein Problem mehr heutzutage? Ich erinnere mich da an Zeiten, als man JS gemieden hat, wie der Teufel das Weihwasser.
Eine Randgruppe tuts natürlich auch heute noch, Javascript aus, könnte ja Tracking oder so sein.
Ist hier aber nicht schlimm der Nutzer kann das Menü trotzdem manuell ein und ausklappen selbst wenn Javascript blockiert ist. Heutzutage kommt kaum eine Seite ohne Javascript aus, es wird benutzt bis die Wände wackeln.
Danke!!!
Sorry aber, irgendwie bin ich zu blöde, das Script zum laufen zu bringen. Meine Menü-Datei sieht jetzt so aus:
<script>
"use strict";
var menu = document.getElementById("blubb");
var width = window.innerWidth;
if (width < 640) {
menu.setAttribute("open", "");
} else {
menu.removeAttribute("open");
}
</script>
<details id="blubb">
<summary>☰ Menü auf/zuklappen</summary>
<nav>
<ul>
<li><a href="index.php" STYLE="font-weight:bold;">Startseite</a></li>
<li><a href="01_allgemeines/index.php">Allgemeines</a></li>
<li><a href="02_grundlagen/index.php">Grundlagen</a></li>
<li><a href="03_afu/index.php">Amateurfunk</a></li>
<li><a href="04_cb/index.php">CB-Funk</a></li>
<li><a href="05_fn/index.php">FreeNet</a></li>
<li><a href="06_pmr/index.php">PMR446</a></li>
<li><a href="07_swl/index.php">Funkempfang</a></li>
<li><a href="08_anderes/feedback.php">Feedback</a></li>
</ul>
</nav>
</DETAILS>
Aber leider reagiert das Menü nicht auf das Script. Was mache ich falsch?
Du musst den Script natürlich unter das Menü packen weil der Browser geht Zeile für Zeile von oben nach unten durch. Logisch muss der Browser erst das Menü sehen und erst danach den Script, der Script läuft nämlich nur ein mal durch. Typischer Anfängerfehler, ist mir auch schon x mal passiert und dann gucke ich wie blöd.
Alternativ kann man den Script warten lassen bis die Seite fertig geladen ist, das würde dann so aussehen:
<script>
"use strict";
window.addEventListener("load", function() {
var menu = document.getElementById("menu");
var height = window.innerHeight;
if (height > 640) {
menu.setAttribute("open", "");
} else {
menu.removeAttribute("open");
}
});
</script>
Damit kann man den Script platzieren wie man möchte da die Funktion erst dann ausgeführt wird wenn alles andere geladen ist.
Endlich funktionierts ... tausendmillionenfachen Dank auch für Deine Geduld. JavaScript ist nicht wirklich "mein Ding" ;-) Aber jetzt klappt das genauso, wie es soll .. bei breitem Fenster ist das Menü da (ohne Humburger-Button und bei schmalen Fenster eingeklappt)
Also was ich verstanden habe möchtest du ein ausklabare Handy nav bauen.
Dazu brauchst du einmal die nav eingeblendet und einmal ausgeblendet.
Dann sagst du mit jawascript, dass wenn der butten geklickt wird, die nav die classe anzeigt, in der die nav zu sehen ist und wenn man nochmal Klick die classe wieder entfernt wird.
Wenn du etwas hilfreiches gefunden hast würde ich mich über einen Kommentar freien. Bin auch gerade dabei meine Webseite responsiv zu machen
Schupaaa! Danke. Nur noch eine Rückfrage: Kann ich es erreichen, dass das Menü beim Aufruf der Startseite ausgeklappt ist? Dann würde ich es nämlich über CSS bei der Mobilen Version eingeklappt und bei der Desktop-Version ausgeklappt lassen. Ich werd emich allerdings jetzt auch mal mit dem Details-Tag auseinandersetzen. Das kannt ich nämlich noch nicht.