Responsive und Slick Navigation mit responsivem Layoutbereich
- Responsive zentrierte horizontale Navigation. Slick Navi ab 800px und einem anderen Banner ab 734px
- Geht mit der Maus in der Navi auch über ‘Themen & Mega Menü’ für ein Maga-Menü inklusive Lytebox
- Hier geht es zum Download der Beispieldateien von smartmenus.org zum besseren Verständnis mit etlichen Beispielen
- Beispiel vertikale Navigationsleiste
- Beispiel mit CSS Slider
Diese responsive Website enthält 1 CSS-Navigationsleiste.
Diese responsive Website ist für mobile Geräte optimiert.
Dieser Text hat eine Breite von 80% und maximal 800px der Seite und liegt in einem Layoutbereich, welcher in einem Textfeld mit einer Breite von 100% liegt. 
Diesem Layoutbereich habe ich als Hintergrund ein Bild gegeben, das auf einer Position ‘fixed’ steht und das Attribut ‘cover’ besitzt.
Weiterhin kann man in diesem Layoutbereich dann auch frei Positionieren und z.B. das Lytebox-Bild einfügen.
Unten ein parallaxer Layoutbereich mit zwei Textfeldern.
Dieses Textfeld hat eine Breite von 30% und eine maximale Breite von 350px.
Lytebox-Gruppe
Dieses Textfeld hat eine Breite von 30% und eine maximale Breite von 350px.
Lytebox-Gruppe
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.
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>
Auf dieser Seite beschreibe ich lediglich die Verwendung des responsiven und parallaxen oberen Layoutbereichs, den ich wie folgt erstellt habe.
1) zieht Euch ein Textfeld auf die volle Layoutbreite auf und gebt diesem Textfeld in den “CSS-Eigenschaften” folgende Einstellungen:
- margin: auto
- width: 100%
2) Zieht Euch in diesem Textfeld einen Layoutbereich auf die gewünschte Höhe auf, wobei die Breite egal ist. Zum besseren Bearbeiten, solltet Ihr die Breite jedoch auf ca. die Breite von dem darunter liegendem Textfeld aufziehen. Hier habe ich im Fenster “Layout-Bereich-Eigenschaften” am Button “Hintergrund” dann mein Bild mit dem Weinlaub gewählt. Dann habe ich wieder in den “CSS-Eigenschaften” eingetragen:
- background-size: cover
- background-attachment: fixed
Der innen liegende Schatten ‘box-shadow’ ist optional.
3) Jetzt habe ich mir auf meinem Layoutbereich erneut ein Textfeld aufgezogen und diesem dann in den “CSS-Eigenschaften” folgende Einstellungen geben
- background-color: rgb(255,255,255) (Hintergrundfarbe vom Textfeld, hier weiß)
- margin: 3.5em auto auto auto (wobei die 3.5em der Abstand zum oberen Rand vom Layoutbereich sind)
- opacity: 0.6 (Deckkraft 60%)
- border-radius: 10px (runde Ecken von 10px)
- width: 80% (Breite vom Textfeld 80%)
- max-width: 800px (Maximale Breite vom Textfeld 800px)
Hier noch eine Ansicht vom Handy vom responsiven Layoutbereich mit dem Textfeld.
Viel Erfolg!
