Responsive Seite mit CSS Media Navi
- Responsive zentrierte horizontale Navigation. Media Navi ab 700px und einem anderen Banner ab 700px
- Beispiel einer responsiven CMS Seite
- Beispiel SmartMenus Navigationsleiste
- Beispiel nur Layoutbereiche
- Beispiel Layoutbereiche mit CSS Slider
Diese responsive Website enthält 1 CSS-Navigationsleiste.
Diese Seite hat keinen Layoutbereich für die Responsivität.
Sie wird dagegen nur mit einer Style-Anweisung im <body> responsive, so wie in meiner “Tutorial Seite” beschrieben. Klickt auch auf den Button unten links für Footer.
Der Layout von NOF hat hier folgendes DIV erhalten.
Am “Beginn des Haupttextes” <body>
<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%;">
Schließt das DIV am “Ende des Haupttextes” </body> wieder:
</div>
Für die Media-Navigation habe ich folgende Datei verwendet, die Ihr Euch an dem Link unten downloaden könnt (rechte Maustaste > Ziel speichern unter)
- dropdown.css (stellt hier die maximale Breite für das Media-Query ein, hier 700px.)
- zum Generieren Eurer persönlichen Navigations-Leiste kann der CSS-Menü-Generator von Webbausteine.de sehr hilfreich sein.
Den Einbau nehmt Ihr ebenso vor, wie in meinem Tutorial zur Slick Navigation.
Nun sieht die Text-Navigation mit den entsprechenden CSS-Klassen so aus. Fügt den Code in die HTML vom Textfeld ein. Die Klappleisten habe ich hier fett markiert.
> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML”
<!-- Button wird nur am Handy gezeigt -->
<button class="buttonover">Navigation ≡</button>
<div class="nav">
<ul>
<li><a href="../index.html">Responsive</a></li>
<li><a class="active" href="javascript:void();">Navigation</a>
<ul>
<li><a href="../Slick-Navigation/slick-navigation.html">Slick Navigation</a></li>
<li><a href="../Nur-Slicknavi/nur-slicknavi.html">Slick Klappleisten</a></li>
<li><a href="../SmartMenus/smartmenus.html">SmartMenu horizontal</a></li>
<li><a href="../SmartMenus-Vertikal/smartmenus-vertikal.html">SmartMenu vertikal</a></li>
</ul>
</li>
<li><a href="javascript:void();">Layoutbereiche</a>
<ul>
<li><a href="../Layoutbereiche/layoutbereiche.html">Text & Lytebox</a></li>
<li><a href="../Layoutbereiche-Slider/layoutbereiche-slider.html">CSS3 Slider</a></li>
</ul>
</li>
<li><a href="javascript:void();">Beispiele</a>
<ul>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Layout-CSS-Parallax/" target="_blank">Parallax</a></li>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Layout-Video-CSS/" target="_blank">Video</a></li>
<li><a href="http://www.nof-tutorials.com/Responsive-Website-Google-Maps/" target="_blank">Google Maps</a></li>
</ul>
</li>
<li><a href="http://www.tommyherrmanndesign.com/nof/html/themen-liste.php" target="_blank">Themen</a></li>
</ul>
</div>
Für den optionalen Button zum Ausblenden der Navigation am mobilen Gerät, habe ich noch folgendes Skript in die HTML von der Seite “Zwischen Head Tags” eingefügt, das sich auf die Class ".nav" bezieht:
<!-- Toggle Navigation -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".nav").toggleClass("main");
});
});
</script>
Hier noch eine Ansicht vom Handy, nachdem sich die Navigation in die Media Navigation geändert hat.
Diese Box öffnet von unten in einer fixierten und zentrierten Position.
Was ein Footer mit zusätzlichen Infos ist
