Responsive und nur Slick Navigation mit Klappleisten
Diese responsive Website enthält 2 unterschiedliche CSS-Navigationsleisten.
- responsive horizontale Navigationsleiste - hier fixiert
- responsive vertikale Slick-Navigationsleiste ab 800px Display-Breite - hier fixiert
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. Guckt Euch auch diese SmartMenus Navigation einmal an.
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
- navigation.css
- stylenav2.css (stellt hier die maximale Breite für das Media-Query ein, hier 800px. Modifiziert auf fixierte Position)
Den Einbau nehmt Ihr ebenso vor, wie in meinem Tutorial zur Slick Navigation. Fügt nur noch den Link zur Datei ‘navigation.css’ ebenso zu.
Hier habe ich unter den Menü-Buttons “Startseite” und “Klappleisten” noch Klappleisten eingebaut, die auch in der Slick Navigation erscheinen, gekennzeichnet durch einen kleinen Pfeil. Diese Klappleisten öffnen sich nach Klick auf den Link am Pfeil.
Nun sieht die Text-Navigation mit den entsprechenden CSS-Klassen so aus. Hier als Beispiel meine Navigation dieser Slick-Navigationseite hier. 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. Die Klappleisten habe ich hier fett markiert.
> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML”
<ul id="menu" class="topnav">
<li><a href="javascript:void();">Startseite</a>
<ul>
<li><a href="../index.html">Responsive</a></li>
</ul>
</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 href="../Slick-Navigation/slick-navigation.html">Slick Navigation</a></li>
<li><a style="background-color: #3C5A9A; border-radius: 4px;" href="./nur-slicknavi.html">Klappleisten</a>
<ul>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax/" target="_blank">Mit Parallax</a></li>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Layout-Video-CSS/" target="_blank">Mit Video</a></li>
</ul>
</li>
<ul class="topnav right">
<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.
