Die Navigation einer Webseite für Smartphones zu optimieren kann schwierig werden. Das jQuery-Plugin FlexNav hilft dabei eine anpassungsfähige Navigation zu erstellen.
FlexNav ist einfach zu verwenden und Lizenzfrei. Der einzige Nachteil ist, man braucht CSS Kenntnisse um das Design der Navigation zu verändern. Auf der Webseite des Plugins: http://jasonweaver.name/lab/flexiblenavigation/ wird erklärt, wie man es auf der eigenen Webseite integriert. Hier erkläre ich es anhand eines einfachen Beispiels wie es funktioniert.
Zuerst geht man auf die GitHub Seite des Plugins und lädt das Plugin herunter.
Danach hat man den Ordner flexnav-master. Man kopiert aus diesen Ordner folgende 2 Dateien:
- flexnav.css (im css Ordner zu finden)
- jquery.flexnav.min.js (im js Ordner zu finden)
Diese 2 kopierten Dateien platziert in einen neuen Ordner namens flexnav und erstellt dazu noch eine leere index.html Datei. Im Ordner flexnav erstellt man zusätzlich noch 2 Unterordner namens css und js. Die Ordnerstruktur sieht danach so aus:
- css
- - flexnav.css
- js
- - jquery.flexnav.min.js
- index.html
Als nächstes lädt man noch den jQuery-Code auf der jQuery Webseite herunter und erstellt zusätzlich noch eine Javascript Datei um das Plugin auszuführen.
Hier der JS-Code um FlexNav auszuführen, die Datei nennt man menu.js.
$(document).ready(function(){
$(".flexnav").flexNav();
});
Die Ordnerstruktur sieht danach so aus:
- css
- - flexnav.css
- js
- - jquery.flexnav.min.js
- - jquery-1.11.3.min.js
- - menu.js
- index.html
Jetzt kann man damit anfangen die Navigation zu erstellen. Dafür öffnet man die leere index.html Datei und kopiert diesen Code hinein:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=''stylesheet'' href=''css/flexnav.css''/>
</head>
<body>
<header>
</header>
<div class="menu-button">Menu</div>
<nav>
<ul class="flexnav" data-breakpoint="800">
<li><a href="">Item 1</a>
<ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a></li>
<li><a href="">Sub 1 Item 3</a></li>
<li><a href="">Sub 1 Item 4</a></li>
</ul>
</li>
<li><a href="">Item 2</a>
<ul>
<li><a href="">Sub 1 Item 1</a></li>
<li><a href="">Sub 1 Item 2</a>
<ul>
<li><a href="">Sub 2 Item 1</a></li>
<li><a href="">Sub 2 Item 2</a></li>
<li><a href="">Sub 2 Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</nav>
<footer>
</footer>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.flexnav.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>
Erklärungen zum Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Diese Codezeile ist notwendig sonst wird die Webseite nicht an den Bildschrim angepasst. Weitere Informationen zum Meta Element viewport: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
<link rel=''stylesheet'' href=''css/flexnav.css''/>
Die CSS-Datei wird eingefügt.
<div class="menu-button">Menu</div>
Die Menü Schaltfläche für Smartphones (kleinere Bildschirme) wird eingefügt, sie muss ausserhalb der Navigation platziert werden. Mittels data breakpoint und Media Queries in der CSS Datei wird bestimmt ab welcher Bildschirmbreite die Menü Schaltfläche erscheint.
<ul class="flexnav" data-breakpoint="800">
Die Navigation mit der Klasse flexnav und den data breakpoint 800 wird eingefügt. Das data-breakpoint bestimmt ab welcher Bildschirmbreite die “normale“ Navigation erscheint und die Menü Schaltfläche verschwindet, in diesen Fall ab einer Bildschirmbreite von 800px. Das ganze muss in der CSS Datei (Media Queries) ebenfalls angepasst werden sonst funktioniert es nicht.
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.flexnav.min.js"></script>
<script src="js/menu.js"></script>
Die JS-Dateien werden eingefügt.
Will man die Bildschirmbreite, ab welcher die Schaltfläche für das das Smartphone Menü erscheint, ändern, so muss man in der index.html Datei diese Codezeile ändern:
<ul class="flexnav" data-breakpoint="800">
Einfach die Zahl 800 mit der gewünschten Bildschirmbreite tauschen, sowie in der flexnav.css Datei diese Codezeile ändern:
@media all and (min-width: 800px)
Auch hier die Bildschirmbreite 800px mit der gleichen Breite wie in der index.html Datei anpassen.
Um das Design der Navigation anzupassen, muss man nur die gewünschten Anpassungen in die flexnav.css Datei schreiben.
Kommentar eingeben