Mobile Navigation

Erlebe eine neue Ära der Benutzerfreundlichkeit mit unserer mobilen Menünavigation, entwickelt mit JavaScript. Unser intuitives System bietet müheloses Navigieren durch Seiten, mit anpassbaren Menüs und flüssigen Animationen.

Rohgerüst

Zuerst erstellen wir unsere Dateien, index.html, scripts.js und style.css. Dann erstellen wir ein Rohgerüst in der html.

// index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mobile Navigation</title>
    <link rel="stylesheet" href="assets/style.css" />
  </head>
  <body>
    <script src="assets/scripts.js"></script>
  </body>
</html>

- `<!DOCTYPE html>`: Deklariert den Dokumenttyp und die HTML-Version.
- `<html lang="de">`: Die Wurzel des HTML-Dokuments, wobei `lang="de"` die Sprache des Dokuments angibt (Deutsch).
- `<head>`: Enthält Meta-Informationen über das Dokument, wie z.B. den Zeichensatz, das Viewport-Meta-Tag für die Darstellung auf mobilen Geräten, den Titel des Dokuments und Verweise auf externe Ressourcen wie CSS- und JavaScript-Dateien.
- `<meta charset="UTF-8" />`: Deklariert den Zeichensatz des Dokuments als UTF-8 (Unicode).
- `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`: Definiert die Ansichtsgröße des Dokuments für die Darstellung auf verschiedenen Geräten und legt den initialen Zoomfaktor fest.
- `<title>Mobile Navigation</title>`: Der Titel des HTML-Dokuments, der im Browser-Tab angezeigt wird.
- `<link rel="stylesheet" href="assets/style.css" />`: Ein Verweis auf die externe CSS-Datei `style.css`, die für das Styling der Seite verwendet wird.
- `<body>`: Der Bereich, der den Inhalt des HTML-Dokuments enthält.
- `<script src="assets/scripts.js"></script>`: Ein Verweis auf die externe JavaScript-Datei `scripts.js`, die für die Funktionalität der Seite verwendet wird.

// index.html

<header class="header">
  <!-- Navigations-Schalter -->
  <button
    type="button"
    class="nav-toggle js-nav-trigger"
    aria-label="Navigation"
    role="button"
  >
    <span class="nav-toggle-stick"></span>
    <span class="nav-toggle-stick"></span>
    <span class="nav-toggle-stick"></span>
  </button>

  <!-- Logo -->
  <div class="logo">
    <a href="#" class="logo-link">
      <div class="logo-image">b4um</div>
    </a>
  </div>

  <!-- Navigationsmenü -->
  <nav id="Nav" class="nav">
    <ul class="nav-list">
      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-title">Südsee</span>
        </a>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-title">Inselparadiese</span>
        </a>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-title">Weltweit</span>
        </a>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-title">Kreuzfahrten</span>
        </a>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="nav-title">Hotels</span>
        </a>
      </li>
    </ul>
  </nav>
</header>

<header class="header">: Definiert den Header-Bereich der Webseite.
<button class="nav-toggle js-nav-trigger">: Ein Schalter zum Öffnen und Schließen des Navigationsmenüs.
<div class="logo">: Bereich für das Logo der Webseite.
<nav id="Nav" class="nav">: Definiert das Navigationsmenü.
<ul class="nav-list">: Eine ungeordnete Liste von Navigationspunkten.
<li class="nav-item">: Ein einzelner Navigationspunkt.
<a href="#" class="nav-link">: Ein Link innerhalb des Navigationsmenüs.
<span class="nav-title">: Der Titel des Navigationspunkts.

Gestallten wir die Navigation

Dieses HTML-Snippet erstellt einen Header mit einem Navigationsmenü, einem Logo und einem Schalter zum Öffnen und Schließen des Menüs. Es ist jedoch noch nicht funktionsfähig, da das JavaScript für das Öffnen und Schließen des Menüs noch implementiert werden muss. Aber jetzt gestallten wir die Navigation erstmal.

// assets/style.css

.header {
  position: fixed; /* Der Header bleibt beim Scrollen der Seite am oberen Bildschirmrand fixiert */
  top: 0; /* Positionierung des Headers am oberen Bildschirmrand */
  left: 0;
  right: 0;
  -webkit-backdrop-filter: saturate(180%) blur(20px); /* Fügt einen Weichzeichnungseffekt für Hintergründe hinzu (experimentell, nur für WebKit-basierte Browser) */
  backdrop-filter: saturate(180%) blur(20px); /* Fügt einen Weichzeichnungseffekt für Hintergründe hinzu */
  background: rgba(
    251,
    251,
    253,
    0.8
  ); /* Hintergrundfarbe des Headers mit Transparenz */
  -webkit-box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1); /* Schatteneffekt für den Header (nur für WebKit-basierte Browser) */
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.1); /* Schatteneffekt für den Header */
  display: -webkit-box; /* Flexibles Layout (nur für WebKit-basierte Browser) */
  display: -ms-flexbox; /* Flexibles Layout (für Microsoft Edge) */
  display: flex; /* Flexibles Layout */
  height: 5rem; /* Höhe des Headers */
  -webkit-box-pack: justify; /* Horizontale Ausrichtung der Elemente (nur für WebKit-basierte Browser) */
  -ms-flex-pack: justify; /* Horizontale Ausrichtung der Elemente (für Microsoft Edge) */
  justify-content: space-between; /* Horizontale Ausrichtung der Elemente mit gleichmäßigem Abstand */
  padding: 0 2.5rem 0 0.83333rem; /* Innenabstand des Headers */
  -webkit-transition: height 0.35s, background 0.35s, -webkit-transform 0.35s; /* Übergangseffekte für Höhe, Hintergrund und Transformationsänderungen (nur für WebKit-basierte Browser) */
  transition: transform 0.35s, height 0.35s, background 0.35s; /* Übergangseffekte für Höhe, Hintergrund und Transformationsänderungen */
  max-width: 100vw; /* Breite des Headers */
  z-index: 100; /* Stapelreihenfolge des Headers über anderen Elementen */
}

Dieses CSS-Styling definiert einen fixierten Header am oberen Bildschirmrand mit einer definierten Höhe, Hintergrundfarbe und Schatten. Die Navigationselemente und das Logo werden mit justify-content: space-between; so angeordnet, dass sie gleichmäßig über die Breite des Headers verteilt sind. Es gibt auch Übergangseffekte für Höhe, Hintergrund und Transformationsänderungen, um einen sanften Übergang beim Scrollen der Seite zu ermöglichen.

Damit wir sehen, dass die Navigation fixed ist füllen wir unsere html mit dummy Text. Wir erstellen einen Container main in dem wir mehrere section erstellen. Noch ein kleiner css code Abschnitt:

// assets/style.css

main {
  margin: auto;
  max-width: 1248px;
  padding-top: 6rem;
}
section {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

...

Navigations-Schalters mit der Klasse .nav-toggle sowie der Striche innerhalb des Schalters mit der Klasse .nav-toggle-stick:

// assets/style.css

.nav-toggle {
  position: fixed; /* Der Schalter bleibt beim Scrollen der Seite am oberen Bildschirmrand fixiert */
  right: 0; /* Positionierung des Schalters am rechten Rand des Bildschirms */
  top: 0.45rem; /* Positionierung des Schalters am oberen Bildschirmrand */
  background-color: transparent; /* Transparenter Hintergrund für den Schalter */
  border: 0; /* Kein Rahmen um den Schalter */
  cursor: pointer; /* Mauszeiger wird zum Zeiger geändert, wenn über den Schalter bewegt */
  display: block; /* Der Schalter wird als Blockelement dargestellt */
  height: 3.75rem; /* Höhe des Schalters */
  transform: rotate(0); /* Anfangswert der Drehung des Schalters */
  transition: 0.35s; /* Übergangseffekt für den Schalter */
  width: 3.75rem; /* Breite des Schalters */
  z-index: 12; /* Stapelreihenfolge des Schalters über anderen Elementen */
}

.nav-toggle-stick {
  backface-visibility: hidden; /* Das Rückseiten-Erscheinungsbild der Striche wird ausgeblendet */
  background-color: #009fe3; /* Hintergrundfarbe der Striche */
  border-radius: 0.1875rem; /* Abgerundete Ecken für die Striche */
  display: block; /* Die Striche werden als Blockelemente dargestellt */
  height: 0.1875rem; /* Höhe der Striche */
  left: 50%; /* Positionierung der Striche in der Mitte des Schalters */
  margin-left: -0.75rem; /* Verschiebung der Striche nach links um die Hälfte ihrer Breite */
  opacity: 1; /* Anfangswert der Transparenz der Striche */
  position: absolute; /* Absolute Positionierung der Striche innerhalb des Schalters */
  transform: translateZ(0); /* Verhindert pixeliges Rendering in manchen Browsern */
  transform-style: preserve-3d; /* Behält das 3D-Erscheinungsbild der Elemente bei */
  transition: 0.3s; /* Übergangseffekt für die Striche */
  width: 1.563rem; /* Breite der Striche */
}

.nav-toggle-stick:nth-child(1) {
  top: 1.45rem;
}
.nav-toggle-push .nav-toggle-stick:nth-child(1) {
  top: 1.8rem;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.nav-toggle-stick:nth-child(2) {
  top: 1.9rem;
}
.nav-toggle-push .nav-toggle-stick:nth-child(2) {
  left: -0.5rem;
  opacity: 0;
}
.nav-toggle-stick:nth-child(3) {
  top: 2.375rem;
}
.nav-toggle-push .nav-toggle-stick:nth-child(3) {
  top: 1.8rem;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

Dieses CSS-Styling definiert einen Schalter mit drei horizontalen Strichen, der als Symbol für das Navigationsmenü dient. Wenn der Schalter betätigt wird, ändern sich die Positionen und Rotationen der Striche entsprechend, um ein "X"-Symbol darzustellen.

Dieses CSS-Styling definiert das Aussehen und Verhalten des Logos auf der Webseite. Hier ist eine Erläuterung zu den verschiedenen CSS-Regeln:

// assets/style.css

.logo {
  display: flex; /* Definiert den Logo-Bereich als Flex-Container */
  flex-direction: row; /* Legt die Ausrichtung der Elemente im Logo-Bereich in einer horizontalen Reihe fest */
  justify-content: center; /* Zentriert die Elemente horizontal im Logo-Bereich */
  align-items: center; /* Zentriert die Elemente vertikal im Logo-Bereich */
}

.logo-link {
  display: inline-block; /* Definiert den Logo-Link als Inline-Blockelement */
  width: 10.25rem; /* Festgelegte Breite des Logo-Links */
  text-decoration: none; /* Entfernt die Standard-Textdekoration des Links */
}

.logo-image {
  transition: width 0.35s; /* Übergangseffekt für die Breite des Logo-Bildes */
  width: 10.25rem; /* Festgelegte Breite des Logo-Bildes */
}

Zusammenfassend: Das Logo wird horizontal und vertikal zentriert im Logo-Bereich angezeigt. Der Logo-Link hat eine festgelegte Breite und keine Standard-Textdekoration. Das Logo-Bild hat eine festgelegte Breite und einen Übergangseffekt für Änderungen der Breite.

Folgendes CSS-Styling definiert das Aussehen und Verhalten der Navigationsleiste auf der Webseite. Hier ist eine Erläuterung zu den verschiedenen CSS-Regeln:

// assets/style.css

.nav {
  position: fixed; /* Die Navigationsleiste bleibt beim Scrollen der Seite am oberen Bildschirmrand fixiert */
  right: 0; /* Positionierung der Navigationsleiste am rechten Bildschirmrand */
  top: 5rem; /* Positionierung der Navigationsleiste am oberen Bildschirmrand mit einem Abstand von 5rem zum Header */
  background: rgba(251, 251, 253, 1); /* Hintergrundfarbe der Navigationsleiste */
  height: calc(100vh - 5rem); /* Höhe der Navigationsleiste berechnet als 100% der Bildschirmhöhe abzüglich der Höhe des Headers */
  opacity: 0; /* Anfangswert der Transparenz der Navigationsleiste */
  padding-top: 2.5rem; /* Innenabstand oben für den Inhalt der Navigationsleiste */
  transition: opacity 0.35s, visibility 0.35s; /* Übergangseffekte für die Transparenz und Sichtbarkeit der Navigationsleiste */
  visibility: hidden; /* Anfangswert der Sichtbarkeit der Navigationsleiste */
  width: 100%; /* Breite der Navigationsleiste */
  overflow: scroll; /* Scrollbalken für den Inhalt der Navigationsleiste anzeigen, wenn dieser größer ist als die sichtbare Höhe */
}

.nav-push.nav {
  top: 3.75rem; /* Positionierung der Navigationsleiste am oberen Bildschirmrand mit einem Abstand von 3.75rem zum Header, wenn sie durch das Öffnen des Menüs verschoben wird */
  height: calc(100vh - 3.75rem); /* Höhe der Navigationsleiste berechnet als 100% der Bildschirmhöhe abzüglich des neuen Abstands zum Header */
}

.nav-list {
  display: flex; /* Die Liste der Navigationspunkte wird als Flex-Container dargestellt */
  flex-wrap: wrap; /* Die Navigationspunkte werden automatisch umgebrochen, wenn sie nicht mehr in einer Zeile passen */
}

.nav-item {
  display: inline-block; /* Die Navigationspunkte werden als Inline-Blockelemente dargestellt */
  padding: 0; /* Kein Innenabstand für die Navigationspunkte */
  width: 100%; /* Die Navigationspunkte nehmen die volle Breite ein */
}

.nav-link {
  position: relative; /* Positionierung des Links relativ zum normalen Fluss des Dokuments */
  display: block; /* Der Link wird als Blockelement dargestellt */
  font-size: 1.25rem; /* Schriftgröße für die Navigationslinks */
  font-weight: 500; /* Schriftgewicht für die Navigationslinks */
  padding: 1.25rem; /* Innenabstand für den Inhalt der Navigationslinks */
  width: 100%; /* Die Navigationslinks nehmen die volle Breite ein */
}

.nav-push {
  opacity: 1;
  visibility: visible;
}

Zusammenfassend: Die Navigationsleiste wird fixiert am oberen Bildschirmrand positioniert und hat eine bestimmte Höhe sowie eine Hintergrundfarbe. Beim Öffnen des Menüs wird sie nach unten verschoben und ihre Höhe angepasst. Die Navigationspunkte werden als Flexbox angeordnet und nehmen jeweils die volle Breite ein. Die Navigationslinks haben eine festgelegte Schriftgröße, Schriftgewicht und Innenabstand.

ToggleMobileNav

Dieses JavaScript-Skript definiert eine Funktion namens ToggleMobileNav, die das Verhalten des Navigationsmenüs auf mobilen Geräten steuert. Hier ist eine Erläuterung zu den verschiedenen Teilen des Skripts

// assets/scripts.js

var ToggleMobileNav = function () {
  // Selektiert den Navigations-Schalter
  var e = document.querySelector(".js-nav-trigger");
  // Selektiert das Navigationsmenü
  var t = document.getElementById("Nav");

  // Überprüft, ob das Navigationsmenü existiert
  if (t) {
    // Fügt einen "click"-Eventlistener zum Navigations-Schalter hinzu
    e.addEventListener("click", function (e) {
      // Verhindert das Standardverhalten des Links
      e.preventDefault();

      // Überprüft, ob der Navigations-Schalter die Klasse "nav-toggle-push" hat
      if (this.classList.contains("nav-toggle-push")) {
        // Wenn ja, entferne die Klasse "nav-toggle-push" vom Navigations-Schalter
        this.classList.remove("nav-toggle-push");
      } else {
        // Wenn nicht, füge die Klasse "nav-toggle-push" zum Navigations-Schalter hinzu
        this.classList.add("nav-toggle-push");
      }

      // Überprüft, ob das Navigationsmenü die Klasse "nav-push" hat
      if (t.classList.contains("nav-push")) {
        // Wenn ja, entferne die Klasse "nav-push" vom Navigationsmenü
        t.classList.remove("nav-push");
      } else {
        // Wenn nicht, füge die Klasse "nav-push" zum Navigationsmenü hinzu
        t.classList.add("nav-push");
      }
    });
  }
};

// Ruft die Funktion ToggleMobileNav auf, um das Navigationsmenü zu initialisieren
ToggleMobileNav();

Zusammenfassend: Dieses JavaScript-Skript selektiert den Navigations-Schalter und das Navigationsmenü. Wenn der Navigations-Schalter geklickt wird, wird das Standardverhalten des Links verhindert. Dann wird überprüft, ob der Navigations-Schalter die Klasse "nav-toggle-push" hat. Wenn ja, wird diese Klasse entfernt, andernfalls wird sie hinzugefügt. Gleichzeitig wird überprüft, ob das Navigationsmenü die Klasse "nav-push" hat, und entsprechend hinzugefügt oder entfernt. Dadurch wird das Menü ein- oder ausgeblendet, je nachdem, ob der Schalter geklickt wird.

1.mp4 15.3 MB

Desktop Ansicht

Mobile haben wir jetzt, nun brauchen wir noch die desktop Ansicht. Diese Media Queries definieren das Verhalten der Navigation und des Navigations-Schalters für Bildschirme mit einer Mindestbreite von 1248 Pixeln. Hier ist eine Erläuterung zu den verschiedenen CSS-Regeln innerhalb der Media Queries:

// assets/style.css

@media (min-width: 1248px) {
  /* Verstecke den Navigations-Schalter für Bildschirme mit einer Mindestbreite von 1248 Pixeln */
  .nav-toggle {
    display: none;
  }

  /* Stelle das Aussehen der Navigationsleiste für Bildschirme mit einer Mindestbreite von 1248 Pixeln wieder her */
  .nav {
    -webkit-backdrop-filter: none; /* Hintergrundfilter ausschalten */
    backdrop-filter: none; /* Hintergrundfilter ausschalten */
    background: transparent; /* Transparenter Hintergrund */
    top: 0; /* Positionierung am oberen Bildschirmrand */
    position: relative; /* Positionierung relativ zum normalen Dokumentfluss */
    height: auto; /* Automatische Höhe */
    opacity: 1; /* Volle Transparenz */
    padding-top: 0; /* Kein oberer Innenabstand */
    visibility: visible; /* Sichtbarkeit wiederherstellen */
    width: auto; /* Automatische Breite */
    overflow: visible; /* Inhaltsüberlauf wiederherstellen */
  }

  /* Stelle das Aussehen der Navigationsliste für Bildschirme mit einer Mindestbreite von 1248 Pixeln wieder her */
  .nav-list {
    display: inline-block; /* Als Inline-Blockelement darstellen */
    height: 100%; /* Volle Höhe */
    margin: 0; /* Kein Außenabstand */
    padding: 0; /* Kein Innenabstand */
  }

  /* Stelle das Aussehen der Navigationspunkte für Bildschirme mit einer Mindestbreite von 1248 Pixeln wieder her */
  .nav-item {
    height: 100%; /* Volle Höhe */
    width: auto; /* Automatische Breite */
  }

  /* Stelle das Aussehen der Navigationspunkte für Bildschirme mit einer Mindestbreite von 1248 Pixeln wieder her */
  .nav-item + .nav-item {
    margin-left: 2.5rem; /* Abstand zwischen aufeinanderfolgenden Navigationspunkten */
  }

  /* Stelle das Aussehen der Navigationslinks für Bildschirme mit einer Mindestbreite von 1248 Pixeln wieder her */
  .nav-link {
    display: flex; /* Als Flex-Container darstellen */
    flex-direction: row; /* Anordnung der Elemente in einer horizontalen Reihe */
    justify-content: center; /* Zentrieren der Elemente horizontal */
    align-items: center; /* Zentrieren der Elemente vertikal */
    font-size: 1rem; /* Schriftgröße */
    height: 100%; /* Volle Höhe */
    padding: 0; /* Kein Innenabstand */
    width: auto; /* Automatische Breite */
    font-weight: 500; /* Schriftgewicht */
  }
}

Zusammenfassend: Diese Media Queries passen das Aussehen der Navigation und des Navigations-Schalters für Bildschirme mit einer Mindestbreite von 1248 Pixeln an. Der Navigations-Schalter wird verborgen, und die Navigation wird wiederhergestellt, sodass sie horizontal angezeigt wird und keine Transparenz- oder Fixierungseffekte mehr hat.

2.mp4 7.55 MB

Meld dich an und schreibe ein Kommentar