CSS | Javascript | Responsive Webdesign

Platzsparend: Aufklappbares jQuery-Navigationsmenü für Phones

campus 1338090 1920

Die Idee, nur noch ein Theme zu entwickeln und damit eine möglichst breite Palette an Endgeräten zu bedienen, ist mit HTML5, CSS3 Mediaqueries und der Praktik “Responsive Webdesign” keine Utopie mehr. An der Tatsache, dass Benutzer unterschiedlicher Endgeräte auf unterschiedliche Methoden zur Bedienung einer Website angewiesen sind, ändert sich dadurch jedoch nichts.

Die Elemente einer Website eins zu eins auf ein mobiles Display zu klatschen – selbst wenn sie der Reihe nach untereinander kommen und sich in der Breite anpassen – kann leicht dazu führen, dass man beim Seitenaufruf von einem Handy aus noch ganz weit weg vom Inhalt ist, zum Beispiel wenn sich davor ein ellenlanges Menü aufbaut. Auf mobilen Displays sind Hovermenüs wenig hilfreich, und da die Displaybreite eingeschränkt ist, wird aus einer horizontalen Menüleiste zumeist eine vertikale Liste.

Nachfolgendes kleines jQuery-Skript setzt ein Menüicon über das Menü, das ab einem via CSS-Mediaquery definiertem Displayfomat statt des Menüs eingeblendert wird, um dieses nur dann dynamisch zu öffnen, wenn man es braucht.

Hinweis: Das nav-Element das die Navigation umschließt hat die ID “access” (Vorbild für die Menüstruktur: Twentyten-Theme), darauf bezieht sich das Skript, wie auch das CSS. Das Menü ist benutzerdefiniert und benannt als “Main Navigation” (woraus sich die ID der Menüliste ableitet), berücksichtigt wird in diesem Beispiel nur eine Ebene.

Scriptdatei

jQuery(document).ready(function($){ /* Menüicon einsetzen */ $('#access').prepend('<div id="menu-icon">Menü</div>'); /* Menü-Umchalter */ $("#menu-icon").on("click", function(){ $("#menu-main-navigation").slideToggle(); /* CSS Klasse für Icon ist .active , wenn Menü sichtbar */ $(this).toggleClass("active"); }); });

Das CSS (ohne Farben)

#menu-icon { display: none; /* menu icon in Standardansicht verstecken */ } #access { margin: 0 auto; position: relative; clear: both; display: block; float: left; width: 100%; z-index: 99999; } #access a { display: block; } #access ul > li { float: left; line-height: 23px; position: relative; } @media all and (max-width: 640px) { .js #access #menu-icon { padding: 0.125em 0.5em 0.25em 2em; line-height:2em; background: url('images/menu-icon-open.png'); background-repeat:no-repeat; background-position:center left; cursor: pointer; display: block; } .js #access #menu-icon.active { background: url('images/menu-icon-close.png'); background-repeat:no-repeat; background-position:center left; } #access #menu-main-navigation { clear: both; position: relative; top: 0px; width: auto; z-index: 10000; padding: 5px; } #site-navigation a { margin-right:60px; /* Raum zum Aufklappen */ } .js #access #menu-main-navigation { display: none; } /* fallback if no javascript is active */ .no-js #access #menu-main-navigation { display:block; } #access #menu-main-navigation li { clear: both; float: none; margin: 5px 0px 5px 15px; } @media screen and (min-width: 641px) { /* sicherstellen, dass Navigation auf Desktops sichtbar bleibt */ .js #access #menu-main-navigation { display: block !important; } }

Quelle: Mobile Navigation Design & Tutorial

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.