Mobile Menü ohne JavaScript, Mobile CSS Menu: auch ohne umfangreiches JavaScript lassen sich schnelle und schlanke Hamburger-Menüs realisieren.
Mobile Menü ohne JavaScript / Mobile CSS Menu: Ein Mobiles Menü mit CSS zu erstellen ist gar nicht so schwer. Trotzdem verwendet das Gros der Websites umfangreiche und komplexe JavaScript-Lösungen, welche meist auf der jquery basieren.
Es gibt jedoch gute Gründe, ein schlankes Mobile Menü ohne JavaScript einzusetzen:
- Mobiles CSS-Menüs funktionieren auch dann, wenn JavaScript abgeschaltet ist.
- Mobile First: Moderne Websites werden vom Mobilgerät aus entwickelt. Mobile First ist dabei weitaus mehr als nur ein „Schlagwort“, denn bereits im Oktober 2016 hatte Google angekündigt, dass der Mobile Index den Desktop Index als Hauptindex ablösen wird. Das bedeutet, dass Google künftig nicht mehr prüft, ob es zur Desktop-Version einer Website auch eine Mobile Version gibt, sondern Google geht den umgekehrten Weg. Die neue Priorisierung sorgt dafür, dass Webentwickler künftig noch stärker auf eine Optimierung der mobilen Webseitenversion achten sollten.Da die mobilen Internetverbindungen in der Regel deutlich langsamer sind als schnelle DSL-Verbindungen und die Benutzer zudem nur über ein begrenztes monatliches Datenvolumen verfügen, sind schlanke, schnell ladende Website gefragt und im Vorteil. Denn das wird von Suchmaschinen honoriert:
- Suchmaschinenoptimierung:
Suchmaschinen möchten dem Suchenden relevante Suchergebnisse bereitstellen. Dazu werden nicht nur die Seiteninhalte geprüft, sondern auch die Ladezeiten. Websites, deren Inhaltsseiten nur einige hundert Kilobyte aufweisen sind daher gegenüber solchen im Vorteil, die mehrere Megabyte Datenvolumen im Gepäck haben.
Mobile Menü ohne JavaScript
Mobile CSS Menu: Nachfolgend stellen wir eine Anleitung für die Realisation eines schlanken Mobilen CSS-Menüs vor.
BEISPIEL ANSEHENWie lässt sich das Design unseres Beispiels umsetzen? Dafür benötigen wir etwas HTML und natürlich entsprechendes CSS:
HTML (Body)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<body> <nav> <div class="brand"><a href="https://a-vista-studios.de"><img src="logo_avs.png" alt=""/></a></div> <a href="#nav-m" id="nav-m"><img src="btn-mobile.png" alt=""/></a> <a href="#" class="close"><img src="btn-mobile-close.png" alt=""/></a> <ul class="menu"> <li><a href="#abschnitt1">Abschnitt 1</a></li> <li><a href="#abschnitt2">Abschnitt 2</a></li> <li><a href="#abschnitt3">Abschnitt 3</a></li> <li><a href="#abschnitt4">Abschnitt 4</a></li> <li><a href="#abschnitt5">Abschnitt 5</a></li> </ul> </nav> <main> <div id="abschnitt1"> <strong>Abschnitt 1</strong><br /> BLINDTEXT </div> <div id="abschnitt2"> <br /> <strong>Abschnitt 2</strong><br /> BLINDTEXT </div> <div id="abschnitt3"> <br /> BLINDTEXT </div> <div id="abschnitt4"> <br /> <strong>Abschnitt 4</strong><br /> BLINDTEXT > </div> <div id="abschnitt5"> <br /> <strong>Abschnitt 5</strong><br /> BLINDTEXT </div> </main> </body> |
CSS: Allgemeine Auszeichnungen und Logo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*----- General Formating -----*/ body, html { font-family: Verdana, Arial, sans-serif; font-size: 0.95em; margin: 0; padding: 0; height: 100%; width: 100%; } a:active, a:focus {outline: none;} main { margin: 3em 1em; line-height: 180%; } /*------------------------------*/ /*----- Logo -----*/ .brand { float: left; padding: 0.5em 1em 0 0.5em; } /*----------------*/ |
CSS: Menü
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/*----- Menu -----*/ nav { margin: 0 auto; width: 100%; height: 11em; text-align: right; position: relative; background: rgba(255, 255, 255, 1.0); border-bottom: 1px solid white; } nav ul { margin: 0; padding: 8.1em 0 0 0; height: 100vh; } nav ul li { list-style: none; margin: 0; display: inline; } nav ul li a { color: #009999; position: relative; padding: 0 0 0.5em 0; display: inline-block; text-decoration: none; text-transform: uppercase; } nav ul.menu li a:hover { color: #03405f; border-bottom: 2px solid #03405f; } /*----------------*/ |
CSS: Media Queries
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/*----- Media Queries -----*/ @media screen and (min-width: 961px) { nav ul.menu { max-height: 20px; } nav a#nav-m, nav a.close { display: none; } nav ul li { margin: 0 30px 0 0; } } @media screen and (max-width: 960px) { /*Formatierung Mobiles Menue*/ nav ul { top: 12em; position: absolute; background: #ccc; width: 100%; left: -100%; list-style-type:none; margin: 0; padding: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } nav ul li{ display: block; text-align: left; padding: 0em 0.5em; border-bottom: 1px solid #fff; } nav ul li a { color: #555; padding: 1em 0; } nav ul.menu li a:hover { border-bottom: 0; } /*Hamburger-Icon*/ nav a#nav-m img, nav a.close img { width: 40px; height: auto; } nav > .close, nav a#nav-m:target { display: none; } nav a:target ~ ul, nav a:target ~ .close { display: inline-block; } nav a:target ~ .close { position: absolute; margin-left: -40px; } nav a:target ~ ul { left: 0; } } /*--------------------------------------*/ |
Erläuterung des CSS für die Erstellung des Mobile CSS Menu
Der größte Teil des Codes ist nicht besonders komplex und der HTML-Bereich dabei besonders einfach gehalten. Im Bereich CSS: Allgemeine Auszeichnungen und Logo wird zunächst die Schriftart sowie Höhe und Breite des Anzeigebereichs festgelegt und definiert, dass beim Focus auf einen Link keine gestrichelten Linien angezeigt werden sollen.
Der Bereich CSS: Menü definiert ein einfaches Navigationsmenü für die Anzeige auf dem Desktop-PC. Es wird über eine UL-Liste erstellt und enthält einige Angaben zur Formatierung des Menüs.
Spannend wird es im Bereich CSS: Media Queries.
- Zunächst wird festgelegt, dass das Hamburger-Icon des mobilen Menüs nicht angezeigt werden soll, wenn die Bildschirmbreite mehr als 960 Pixel beträgt (@media screen and (min-width: 961px) {…} ).
- Danach wird dem Browser mitgeteilt, wie das Menü gestaltet werden soll, wenn die Breite des Browserfensters kleiner oder gleich 960 Pixel ist (@media screen and (max-width: 960px) {…} ).
- nav ul {…}
Das Menü wird zunächst verborgen, indem es um 100% nach links versetzt wird. Zusätzlich definieren wir eine transition, um über CSS3 auch ohne JavaScript einen Animationseffekt zu verwirklichen. - nav ul li {…}
Über display:block wird erreicht, dass die Menüpunkte des mobilen Menüs nicht mehr in einer Zeile, sondern untereinander angezeigt werden. -
/*Hamburger-Icon*/
Dieser Bereich ist für die Funktionalität des Hamburger-Menüs zuständig.
Es gibt zwei Hamburger-Icons. Eins ist blau, das andere grau. Die beiden sind deckungsgleich übereinander positioniert. Wird das blaue Hamburger-Icon angeklickt und dabei das Menü ausgefahren, so wird gleichzeitig das graue Hamburger-Icon sichtbar gesetzt und erscheint an der Position des blauen Icons.Beim Klick auf das blaue Hamburger-Icon wird auf einen Anker referenziert (<a href=“#nav-m“…) und das blaue Hamburger-Icons wird ausgeblendet. Durch die Referenzierung lässt sich der Zustand über die CSS-Pseudoklasse :target prüfen.
Gleichzeitig wird die UL des Menüs von left:-100%; auf left:0; gesetzt (mittels nav a:target ~ ul{left: 0;} ) und bewegt sich dadurch von der bisherigen linken Positionierung (außerhalb des sichtbaren Bereichs) in das Betrachtungsfeld.
nav a#nav-m img, nav a.close img {…}
Die Anzeigegröße des Hamburger-Menü-Icons wird festgelegt.nav > .close, nav a#nav-m:target {display: none;}
Standardeinstellung ist, dass das graue Hamburger-Menü-Icon (nav > .close) nicht angezeigt wird. Über die CSS-Pseudoklasse :target wird dafür gesorgt, dass das blaue Hamburger-Menü-Icon verborgen wird, wenn es angeklickt wird und dabei den target erhält (a#nav-m:target).nav a:target ~ ul, nav a:target ~ .close {display: inline-block;}
Wenn der Link aktiv ist (wird auch hier über die CSS-Peseudoklasse a:target geprüft), werden die Navigationsliste sowie das graue Hamburger-Menü-Icon auf sichtbar gesetzt.
Fazit: die Anleitung zur Erstellung eines Mobile Menü ohne JavaScript zeigt, dass sich auf relativ einfache Art ein Mobile CSS Menu realisieren lässt.
Stichworte: Mobile Menü ohne JavaScript, Mobile CSS Menu, Hamburger Menü
MoinMoin nach Leverkusen 😉
Erst mal vielen Dank, euer Tutorial durch zu arbeiten hat mir viel Spaß gemacht und ich habe einiges dabei gelernt.
Leider ist euer Menü nicht fix am oberen Rand und meine Versuche in diese Richtung sind leider gescheitert (Bei mir wandern die Buttons nicht mit nach links wenn ich den Browser zusammen schiebe).
Könnt ihr vieleicht veröffentlichen wie das funktioniert.
Vielen Dank im Voraus
Thomas
Hallo Thomas,
vielen Dank für das nette Feedback!
Diese Anleitung mit Demo erklärt/zeigt die gewünschte Funktionalität:
https://a-vista-studios.de/blog/webdesign/sticky-menu-feststehendes-menue-html/
Viele Grüße!
Hallo,
vielen Dank für die Anleitung. Genau nach sowas habe ich gesucht.
War super easy einzubinden.
Eine frage wäre da noch, wie muss ich den Code abändern um ein „Multilevel“ Menü zu erhalten?
Hallo Stefan,
freut mich, dass Ihnen das Responsive Menü gefällt und die Einbindung reibungslos geklappt hat.
Um Untermenübereiche zu realisieren, muss lediglich das HTML sowie das CSS entsprechend erweitert werden. Das funktioniert auch nicht anders als bei einem „normalen“ (nicht-responsiven) Menü.
Screenansicht: einfach die Untermenüpunkte via HTML integrieren, per CSS verbergen und bei einem :hover über den Hauptmenüpunkt per CSS einblenden.
Mobile Ansicht: dort die Untermenüpunkte einblenden, wenn der Hauptmenüpunkt geklickt bzw. auf dem Tablet/Smartphone berührt wird.
Da der Code für das Mobile Menue bereits recht umfangreich ist, haben wir uns auf diesen konzentriert und darauf verzichtet, ihn mit zusätzlichem erweiterten Code zu belasten.
Moin aus dem Emsland!
Was muss ich schreiben, um den/das Hamburger ohne Klick auf das graue Kreuz zu schließen?
Die Navigation soll geschlossen werden bei Klick irgendwo auf der Seite.
Gruß
Siggi
Hallo Werner,
mit dieser Technik ist das m.E. nicht möglich. Man müsste dazu einen TARGET auf den BODY setzen.
Also den Document-Body z.B. [body id=“body“] und dann im CSS #body:target nav… auf display:none. Das klappt aber nicht, denn so hat man keinen „Trigger“ in Form eines Links der durch Anklicken die Aktion auslöst.
Tolles Ding, hab viel dabei gelernt! Klasse, schön das es das internet gibt;-) DANKE
Hallo,
es gibt ein kleines Problem mit dem Code. Wenn ich die CSS Datei, die HTML Datei eingebunden habe, wird die CSS Datei nicht ausgelesen bzw. ignoriert. Können Sie mir dabei helfen?
Mit freundlichen Grüßen
Thiemo!
Hallo Thiemo,
wenn die CSS-Datei nicht „ausgelesen“ wird, liegt das in der Regel daran, dass die Pfadangabe zur CSS-Datei nicht korrekt ist.
Beispiele:
Befindet sich die CSS-Datei im selben Verzeichnis wie die HTML-Datei, so lautet die Pfadangabe:
[link rel=“stylesheet“ type=“text/css“ href=“/meine-css-datei.css“ media=“all“]
Befindet sich die HTML-Datei in einem Verzeichnis und die CSS-Datei im Unterverzeichnis /styles so würde die Pfadangabe lauten:
[link rel=“stylesheet“ type=“text/css“ href=“/styles/meine-css-datei.css“ media=“all“]
Befindet sich die HTML-Datei in einem Verzeichnis und die CSS-Datei im darüber liegenden Verzeichnis (also eine Verzeichnisebene höher) so würde die Pfadangabe lauten:
[link rel=“stylesheet“ type=“text/css“ href=“../meine-css-datei.css“ media=“all“]
Achtung: bitte die Zeichen [] durch <> ersetzen! Das musste leider geändert werden, da die Kommentarfunktion sonst den Code nicht anzeigt, sondern intepretiert.
Ich hoffe, das hilft Ihnen weiter.
Beste Grüße!
Könnten Sie mir erklären was das bedeutet?
/*Hamburger-Icon*/
nav a#nav-m img,
hat das einen Grund warum zwischen dem hashtag und a kein Leerzeichen ist?
Offensichtlich ist das ganze ja etwas anderes wie „nav a #nav-m img,“. Ich frage weil ich das noch nie so gesehen habe.
Hallo Pauledd,
mit der genannten Zeile wird der entsprechende Bereich im Quellcode angesprochen. Klicken Sie dazu hier auf der Seite auf den blauen Button BEIPIEL ANSEHEN und rufen Sie den Quelltext der Demo-Seite auf. Im Quellcode steht unter anderem:
a href=“#nav-m“ id=“nav-m“ rel=“nofollow“
Um den Hamburger per CSS anzusprechen, lautet der Code folglich:
nav a#nav-m img,
denn die class-ID #nav-m gehört direkt zur href (also zum a-Tag).
Dieser Bezug geht bei nav a #nav-m img, verloren und daher kann das nicht funktionieren.
Beste Grüße!
Hallo avs,
cool, Dein Code! Nur leider sehe ich in der default-Ansicht die Burger-Icons „doppelt“ (= nebeneinander eingeblendet) bis ich den einen (rechten) anklicke. Was mache ich falsch?
Freue mich auf Deinen Tipp
die (Durch-)Starterin
Hallo Annette,
bei unserem Code wird auf der Demo-Seite der Hamburger nicht doppelt angezeigt. Zumindest nicht im Rahmen unserer Tests (Firefox, Internet Explorer, Chrome, Safari).
Vielleicht haben Sie unseren Code angepasst/verändert und dadurch kommt es zur „Doppelung“? Oder es ist auf der Seite weiterer (zusätzlicher) CSS-Code vorhanden, der das von uns vorgestellte CSS beeinflusst?
Ich würde gerne dieses Menü für meine Website nutzen. Diese hat bereits ein navigationsmenü, wie kann ich dies einbauen das es funktioniert?
Scheiter bislang daran
Hallo Tom,
interessant finde ich den Copyrightvermerk im Quellcode der genannten Seite djft.de 😉
Dort steht:
Dieses CMS System wurde von Volker Brosius – Brosius-Datentechnik entwickelt. Sämtlicher Code unterliegt dem Copyright und darf weder geändert noch kopiert werden.
Der Code für das Mobile Menü soll also aus unserem Blog bezogen werden und das Copyright für unseren Code dann künfig bei Volker Brosius liegen??? Aus juristischer Sicht ist das eine interessante Herangehensweise an das Thema „Urheberrecht“.
Wie unser Code zu implementieren ist, hängt natürlich vom verwendeten CMS-System ab. Daher können wir dazu pauschal nichts sagen. Sie können uns aber gerne die Zugangsdaten zum CMS-System zukommen lassen und uns mit der Prüfung und Implementierung beauftragen.
wie kann ich denn in die navigationsleiste auch social media buttons setzen anstatt nur wörter?
Hallo Manuel,
dazu müssen Sie das HTML und ggf. auch CSS entsprechend erweitern. In der Liste der Navigationsmenü-Punkte lassen sich natürlich auch Icons (z.B. Facebook) einbinden.
Dazu wird einfach die oben stehende Liste um einen oder mehrere Listenpunkte ergänzt in denen statt eines Textes ein (verlinktes) Icon integriert wird.
Oder Sie integrieren die Social Icons nicht im Menü, sondern beispielsweise unterhalb des Menüs oder im Footer.
Herrlicher („in einem so hohen Maße gut, schön, dass es sich nicht besser, schöner denken lässt“) Blindtext
Hey, danke für die Anleitung, hat mir echt geholfen, auch wenn ich nicht jeden Schritt verstehe ^^
Habe mit deiner Anleitung in HTML ein gut funktionierendes mobiles Menu erstellt. Jetzt wollte ich die Seite in Typo3 einarbeiten und es macht große Probleme. Kennst du dich mit Typo3 aus und weißt vielleicht woran das liegen könnte?
PS: Bei solchen Guides am besten jegliches Design-Element (Farbe o.ä.) weglassen und nur auf den Code konzentrieren der wichtig ist um das Problem zu lösen 🙂
[Feedback wurde per private Nachricht gegeben]
Hallo, find ich top! sehr einfach gestaltet – aber: Sollte das DIV
nicht erst nach den Links geschlossen werden?
LG
Jay
Hallo Jay,
probieren Sie es einmal aus. Schließt man das DIV erst hinter den Menü-Links, so müsste das das Layout zerhauen:
Eine tolle Lösung!
Ein gravierendes Problem habe ich damit aber: Platziert man im Main-Text (z. B. im Abschnitt 1 Eures Beispiels) Links, so sind diese nur in der Mobile-Version anklickbar.
Erst unterhalb der Position des Mobile-Menüs sind Links in der Nicht-Mobile-Ansicht wieder anklickbar. Mir scheint, dass der auf einem breiten Bildschirm gar nicht benötigte Container des Mobile-Menüs, also sozusagen unsichtbar über dem Main-Text zu liegen …
Hallo Hauke,
vielen Dank für das Lob und für den Hinweis!
Dieses Problem war uns noch gar nicht aufgefallen. Bei vorstehender Demo ging es darum, den Code so einfach nachvollziehbar wie möglich zu halten. Versionen, die bei uns im Produktiveinsatz sind, weisen das Problem nicht auf. Sie sind letztendlich auch komplexer und haben unter anderem in der Regel noch Submenüs.
Das Problem lässt sich aber leicht beheben, indem im vorstehenden Beispiel dem Menü einfach eine maximale Höhe mitgegeben wird. Das wurde nun angepasst. In vorstehendem Code der Bereich:
/*—– Media Queries —–*/ @media screen and (min-width: 961px) { …}
Dort wurde ergänzt: nav ul.menu {max-height: 20px;}
Nun funktionieren auch Links, am Anfang des Textes integriert werden.
Danke, Gregg! Sehr motivierend.
Danke für die tolle Anleitung. Genau das, was ich gesucht habe – eine schnelle und schlanke Lösung ohne endlos langen Javascript-Code. Das ist ein Mobile Menu, das auch dann noch funktioniert, wenn Javascript nicht aktiv ist. Toll.