Responsive Navigationsmenü für Smartphones und Tablets erstellen - ein kostenloses Tutorial auf deutsch

Viele Navigationsmenüs klappen weitere Unterpunkte auf, wenn die Maus über ein Feld fährt. Dies funktioniert jedoch nicht bei Tablets oder Smartphones, da es dort keine Maus gibt und deshalb eine Finger-Bedienung nötig ist. Ferner werden bei Handys viel schmalere Navigationleisten benötigt. In dieser Anleitung wird daher genau erläutert, wie Sie kostenlos ein responsive CSS Navigationsmenü für Ihre Homepage erstellen, das sich genau an Handys oder Smartphones anpasst und per Finger-Antippen weitere Menü-Unterpunkte anzeigt.
Anzeige

 

Diese Anleitung basiert auf dem kostenlosen "Responsive Flat Menu" Navigations-Skript von cssmenumaker.com. Bitte laden Sie das Skript dort zuerst kostenlos herunter. Dieses Skript wurde für die Navigationsleiste auf Schulhomepage.de angepasst und besteht aus drei Dateien:

 

1. Erläuterung der Datei index.html:

Die index.html ist eine einfache HTML-Seite, die Sie in Ihrem Browser aufrufen, um eine Vorschau anzusehen. Sie beinhaltet vor allem vier wichtige Zeilen bzw. Elemente:

  1. <link rel="stylesheet" href="styles.css">
    Hiermit wird das CSS-Stylesheet eingebungen. Eine Erläuterung gibt es weiter unten im Bereich "3. Erläuterung des Aufbaus der styles.css ...".


  2. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    Diese Zeile bindet den aktuellen und kostenlosen jQuery-Code ein, der für das Navigations-Menu nötig ist. Diese Zeile benötigen Sie in Ihrer späteren eigenen Website aber nur, wenn Sie sie noch nicht vorher eingebunden haben.Alternativ können Sie natürlich auch das aktuelle jQuery-Paket herunterladen und dann über Ihre Website einbinden.


  3. <script src="script.js"></script>
    Hiermit wird die Javascript-Datein script.js eingebunden. Diese Javascript-Datei sorgt dafür, dass sich auf mobilen Geräten wie Handys oder Tablets das Navigationsmenü an die Breite des Bildschirms anpasst und sich die Untermenüs beim Antippen mit einem Finger auf- und zuklappen. In dieser Datei sollten Sie keine Änderungen vornehmen. Weitere Infos zu dieser Datei finden Sie im Bereich "2. Erläuterung der Datei script.js".


  4. <div id="cssmenu"> ... </div>
    Nur wenn Sie um Ihren eigentlichen Navigationsinhalt diesen <div>-Container legen, wird Ihre Navigationsleiste auf dem Desktop, Smartphones und Tablets so funktionieren wie Sie das Design festgelegt haben.

 

 

2. Erläuterung der Datei script.js

Diese Javascript-Datei sorgt dafür, dass bei Smartphones und Tablets die Navigation auf eine Menu-Leiste umgestellt wird, die per Finger-Tipp bedienbar ist:

Beim Antippen der Menü-Leiste mit dem Finger öffnet sich die erste Menü-Ebene:

 

Beim Antippen des "+"-Zeichens öffnet sich die nächste Navigations-Ebene:

 

 

3. Erläuterung des Aufbaus der styles.css und wie Sie das Design an Ihre Website anpassen können

Wenn Sie die styles.css öffnen, startet der Code mit der Zeile:

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

Hiermit werden Google-Schriftarten eingebunden. Wenn Sie eine andere Schriftart verwenden wollen, können Sie diese Zeile einfach löschen. Dann wird automatisch die Standard-Schriftart Ihrer Website verwendet.

In den folgenden Zeilen 2-182 werden alle Formatierungen für den Fall festgelegt, dass Sie mit KEINEM Smartphone oder Tablet das Navigationsmenu benutzen. In der Regel ist der Benutzer dann an einem ganz normalen Desktop-PC und sieht zum Beipiel diese Navigationsleiste:

Sie können einfach herausfinden, welcher Teil der ersten 182 Code-Zeilen was genau macht, indem Sie testweise z.B. eine Farbe verändern und auf leuchtend rot setzen, z.B. auf #FF3300. Dann testen Sie die Veränderung im Browser und sehen schnell welchen Teil des Navigationsmenüs Sie verändert haben. Auf diese Weise passen Sie dann beliebig die farbliche Gestaltung des Navigations-Codes an.
Noch ein Tipp: Die zeitliche Verzögerung beim Ausklappen der Menü-Ebenen lässt sich deaktivieren, indem Sie den Code

all .25s ease

auf

all .00s ease

stellen.

 

Ab Zeile 183 finden Sie dann alle Änderungen, die das Responsive Navigations-Menu für Smartphones und Tablets macht, damit Besucher mit mobilen Geräten dieses durch Antippen navigierbare Menu verwenden können:

Zur Anpassung gehen Sie wieder wie oben bei den ersten 182 Zeilen beschrieben vor.

 

Die neue Navigationsleiste in Ihre Website einbauen

Nachdem Sie das Design individuell angepasst haben, müssen Sie nun nur noch die neue responsive Navigations-Leiste in Ihre Website einbauen und anschliessend auf einem Smartphone und Tablet testen. Zum Einbau suchen Sie im Code Ihrer Homepage nach der Stelle, an der die Navigation eingebaut ist. Um diese Stelle herum setzen Sie den div-Container und darin Ihre Navigationspunkkte so wie auch in der Datei index.html:

<div class="cssmenu">
<ul>
<li>navi1</li>
    <ul><li>navi 1.1</li>
        <li>navi 1.2</li>
    </ul>
<li>navi2</li>
</ul>
</div>

 Außerdem müssen Sie natürlich jQuery und die Dateien "styles.css" und "script.js" in die Design-Vorlage Ihrer Website einbauen, z. B. so:

<link rel="stylesheet" href="styles.css"><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script src="script.js"></script>

 

 

Fazit: Ein Responsive Navigationsmenü für Smartphones und Tablets lässt sich einfach erstellen

Mit Hilfe der kostenlosen Vorlage für das responsive Navigations-Menu können Sie kinderleicht die Navigation Ihrer Schul-Website für Smartphones und Tablets optimieren. Für die individuellen Anpassungen benötigen Sie nur etwas Zeit und müssen ausprobieren, wie Sie Ihr individuelles Design gestalten wollen. Letztlich erhalten Sie in ca. 2 Stunden eine erhebliche Verbesserung der Benutzerfreundlichkeit Ihrer Schulhomepage, da sich mit diesem responsive Navigationsmenü auch Untermenüs auf mobilen Geräten mit dem Finger aufrufen lassen.

Wenn Sie noch genauere Erläuterungen zu dem Script erhalten wollen, bietet der Entwickler in einem Artikel ein noch detaillierteres Tutorial zu demselben Responsive Navigationsmenü für Smartphones und Tablets - sehr hilfreich auch wenn es auf Englisch ist.

 

 


Anzeige

Mehr Artikel zu »Benutzerfreundlichkeit: Orientierung«