Responsive und Slick Navigation mit responsivem Layoutbereich

 

    Diese responsive Website enthält 1 CSS-Navigationsleiste.

  • 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 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. Klick für Lytebox

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.

Klick für Lytebox
Lytebox-Gruppe

Dieses Textfeld hat eine Breite von 30% und eine maximale Breite von 350px.

Klick für Lytebox
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%

CSS Textfeld Unten

 

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.

CSS Layoutbereich

 

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)

CSS Textfeld Oben

 

Hier noch eine Ansicht vom Handy vom responsiven Layoutbereich mit dem Textfeld.

Ansicht Responsive Layout am Handy

nach oben

Viel Erfolg!

Willkommen bei NOF-Tutorials.com