Responsive und Slick Navigation
Diese responsive Website enthält 3 unterschiedliche CSS-Navigationsleisten.
- responsive horizontale Navigationsleiste
- responsive vertikalte Navigationsleiste ab 800px Display-Breite (die Ihr auch weglassen könntet, wie auf dieser Seite hier)
- responsive vertikale Slick-Navigationsleiste ab 600px Display-Breite
Diese responsive Seite beruht auf einem Layoutbereich, ähnlich wie in diesem Tutorial von mir beschrieben, denn die Slick-Navigation benötigt eine relative Positionierung vom NOF-Layout.
Der Layoutbereich hat hier folgendes DIV erhalten.
Vorher (vor dem Tag), wobei hier die 325px der Abstand zum oberen Rand der Seite ist.
<div style="position: absolute; top: 325px; left: 0; bottom: 0; right: 0; margin: auto; width: 100%;">
Schließt das DIV “nachher” (nach dem Tag) wieder:
</div>
Für die zusätzliche Slick-Navigation habe ich folgende Dateien verwendet, die Ihr Euch an den Links unten downloaden könnt (rechte Maustaste > Ziel speichern unter)
- jquery.slicknav.js
- slicknav.css
- stylenav.css (stellt hier die maximale Breite für das Media-Query ein, hier 600px)
Ich habe diese Dateien hier in das gleiche Verzeichnis wie diese Seite kopiert und folgende Verlinkungen für die Slick-Navigation in die HTML meiner Seite hinzugefügt.
> “Zwischen Head Tags”
<link rel="stylesheet" href="stylenav.css">
<link rel="stylesheet" href="slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
> “Ende des Haupttextes” (body)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
Nun sieht die Text-Navigation mit den entsprechenden CSS-Klassen so aus. Hier als Beispiel meine Navigation dieser Slick-Navigationseite hier. Gebt der jeweils aktiven Seite die class="active" und fügt den Code in die HTML vom Textfeld ein. Hier habe ich noch die id="menu" aus der CSS der Slick-Navigation hinzugefügt.
> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML”
<ul id="menu" class="topnav">
<li><a href="../index.html">Responsive</a></li>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax/Tutorial/tutorial.html" target="_blank">Tutorial Seite</a></li>
<li><a href="../Tutorial/tutorial.html">Tutorial Navigation</a></li>
<li><a class="active" href="./slick-navigation.html">Slick Navigation</a></li>
<li><a href="../Nur-Slicknavi/nur-slicknavi.html">Klappleisteni</a></li>
<ul class="topnav right">
<li><a href="http://www.tommyherrmanndesign.com/nof/html/nof-gast.php" target="_blank">Gästebuch</a></li>
<li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" target="_blank">Themen</a></li>
</ul>
</ul>
Hier noch eine Ansicht vom Handy, nachdem sich die Navigation in die Slick Navigation geändert hat.
