Platzsparend: Aufklappbares jQuery-Navigationsmenü für Phones

Das Bild unterliegt keinen urheberrechtlichen Beschränkungen

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.

Auf dieser Site ist das Skript das ich hier vorstelle im Einsatz. Zum Ausprobieren entweder durch umschalten auf “Phone”, oder einfach das Browserfenster so lange schmaler machen, bis anstelle der Navigation ein Menübutton sichtbar wird. Im Theme muss dafür jQuery aktiviert sein. Außerdem ist die Javascript Library modernizr (.js und .no-js – Klasse für das CSS) eingebunden.

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.

Skript in der header.php

(bei mir befindet es sich vor dem head-Entag)

<script>
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");
	});
});
</script>

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;
    }
}