Navigation bei responsive Webdesign

Wenn man eine Website responsive erstellt, dann kommt der Navigation für die Seiten eine zentrale Bedeutung zu. Es gehört zu den wichtigsten Elementen und kann unter Umständen auch zu den am schwierigsten umzusetzenden Elementen gezählt werden. Denn, über die Navigation rufen die User die einzelnen Seiten einer Internetpräsenz auf. Sie muss daher intuitiv sein, damit man problemlos navigieren kann. Bei Geräten mit kleinen Displays ist man jedoch damit konfrontiert, dass nicht genug Platz zur Verfügung steht. Bei wenigen Navigationspunkten kann man das schnell lösen. Viele Websites haben jedoch eine umfangreiche Navigation mit vielen Ebenen. Das kann eine echte Herausforderung für die Entwickler darstellen.

Hierbei werden meistens folgende Varianten eingesetzt:

  • Navigation nur mit HTML- und CSS-Code
  • Navigation mit HTML- und CSS-Code mit Einsatz von JavaScript

Nachfolgend einige Beispiele, wie man die Navigation sinnvoll unterbringen kann, sodass sie auch auf kleinen Displays intuitiv bedienbar ist.

Navigation im Footer unterbringen

Bei dieser Variante wird die Navigation im Footer untergebracht. So bleibt zunächst der Artikel im Vordergrund. Ist der Benutzer am Ende angelangt, wird die Navigation automatisch sichtbar und der User kann andere Seiten aufrufen. Damit der Benutzer auch am Anfang einen Link zur Navigation zu sehen bekommt, kann man die Navigation mit einer Sprungmarke versehen und zu Beginn einen internen Link zur Navigation setzen. Die HTML-Codes hierfür sind unter interne Links in HTML beschrieben.

Footer-Navigation bei responsive Webdesign

Der Vorteil bei dieser Variante ist, dass hierfür kein JavaScript-Code benötigt wird. Somit ist sichergestellt, dass es auch auf Geräten mit deaktiviertem JavaScript funktioniert und man spart sich Ladezeiten für den JavaScript-Code. Außerdem eignet sich diese Variante auch für große Navigationsstrukturen mit vielen Ebenen. Denn, am Ende der Seite kann die Navigation im Prinzip beliebig lang sein. Etwas nachteilig bei dieser Variante ist lediglich, dass es für die Benutzer etwas "ungewohnt" ist, die Navigation am Ende der Seite zu finden. Denn, normalerweise befinden sich im Footer die "eher unwichtigen" Punkte, wozu keinesfalls die Navigation zählt. Es besteht also die Gefahr, dass die User die eigentliche Hauptnavigation als etwas Nebensächliches betrachten und daher nicht beachten.

Navigation ohne wesentliche Änderungen

Eine Navigation kann sehr einfach responsive gestaltet werden. Hierbei wird dem Container, in dem sich die Navigation befindet, lediglich eine Mindesthöhe (min-height: ...px;) und Zeilenhöhe (line-height: ...px;) zugewiesen. Bei geringen Breiten bricht die Navigationszeile um und wird in der nächsten Zeile fortgeführt. Die Höhe des Containers richtet sich nach der Anzahl der Zeilen und der festgelegten Zeilenhöhe.

Solch eine Navigation wird auch "Tu fast nichts"-Navigation genannt, da man hierbei kaum Änderungen vornehmen muss. Es eignet sich insbesondere für eine Navigation, bei der die Navigationspunkte normalerweise horizontal angeordnet sind.

Einfache responsive Navigation

Vorteilhaft bei dieser Variante ist, dass man eine Navigation schnell responsive gestalten kann. Auch hierbei wird kein JavaScript benötigt. Nachteilig ist, dass es sich nicht für eine große Navigation eignet. Außerdem könnte es passieren, dass die Navigation unharmonisch aussieht, wenn die Menüpunkte unterschiedlich breit sind.

Navigationspunkte in einem Raster anordnen

Eine weitere Variante der "Tu fast nichts"-Navigation ist die Raster-Navigation. Hierbei weist man den Containern, in denen sich die Navigationspunkte befinden, einfach die Breite 50% zu. Das bewirkt, dass nach jedem zweiten Navigationspunkt eine neue Zeile begonnen wird und die Menüpunkte in einem Raster angeordnet werden.

Raster-Navigation

Beim Raster-Menü hat man gegenüber dem normalen "Tu fast nichts"-Menü den Vorteil, dass die Navigation nicht unsymmetrisch aussieht. Auch hierbei benötigt man kein JavaScript. Diese Variante eignet sich jedoch ebenfalls nur für kleine Navigationen. Bei kleinen Smartphones würden große Navigationen unter Umständen den gesamten Bildschirm bedecken.

Toggle-Menü

Beim Toggle-Menü wird die Sichtbarkeit der Navigation mit einem Klick auf das Navigations-Icon geändert. Beispielsweise kann man den Container, in dem sich die Navigation befindet, mit der CSS-Einstellung display: none; zunächst ausblenden. Nach einem Klick auf das Navigations-Icon wird die CSS-Einstellung auf display: block; geändert und das Menü ist sichtbar. Für diesen Vorgang benötigt man JavaScript, da hierbei die CSS-Einstellungen geändert werden, ohne die Seite neu zu laden.

Toggle-Menü

Entscheidet man sich für ein Menü, das mit JavaScript ein- und ausgeblendet wird, muss man festlegen, wie das Ein- und Ausblenden erfolgen soll. Von oben, links, rechts, unten etc. Es gibt außerdem die Möglichkeit, die Navigation über den bisherigen Inhalt überlappen zu lassen oder den Inhalt so einzublenden, dass der restliche Inhalt verschoben wird.

Menü überlappt oder verschiebt Inhalt

Neben der Art der Ein- und Ausblendung sind beim Einsatz von JavaScript viele weitere Entscheidungen zu treffen. Einige Punkte, über die man sich Gedanken machen sollte.

  • Ab welchem Breakpoint soll das Navigations-Icon ein- und ausgeblendet werden?
  • Soll beim Initialzustand das Menü ein- oder ausgeblendet sein?
  • Was soll beim Verändern der Fenstergröße passieren? Menü erneut ein- oder ausblenden?
  • Was soll beim Umstellen des Displays (auf Hoch- und Querformat) passieren?
  • Was sollen die User sehen, die kein JavaScript aktiviert haben?

HTML-, CSS- und JavaScript-Code für ein einfaches Toggle-Menü

Nachfolgend der Code für eine Seite mit einem einfachen Toggle-Menü.

<html>
<head>
<!-- jQuery laden -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
<!--
/* Toggle-Link einblenden */
@media only screen and (min-width:320px) {
  div.navigation-ein-aus {
    display: block;
  }
}
/* Toggle-Link ausblenden */
@media only screen and (min-width:768px) {
  div.navigation-ein-aus {
    display: none;
  }
}
-->
</style>

</head>
<body>

<!-- JavaScript-Code für Toggle-Funktion -->
<script type="text/javascript">
  $(document).ready(function(){
    $('#navigation-ein-aus').click(function(){
  $('#navigation').toggle('fast');
    })
  });
</script>

<!-- Toggle-Link -->
<div id="navigation-ein-aus">
  <a href="#">Navigation ein/aus</a>
</div>

<!-- Navigation, die ein- und ausgeblendet wird -->
<div id="navigation">
  <p>Hier ist die Navigation</p>
</div>

</body>
</html>

Im Internet gibt es eine Vielzahl an kostenlosen und kostenpflichtigen Codeschnipseln, die man für ein Menü verwenden kann. Man kann ein Code nehmen, der den Wünschen am ehesten entspricht und die notwendigen Anpassungen vornehmen.