CSS-only responsive menu

Es gibt viele Techniken zum Erstellen von responsiven mobilen Menüs. Eine häufige Praxis besteht darin, ausschließlich CSS zu verwenden, ohne eine einzige Zeile JavaScript. Diese Technik beinhaltet die Verwendung einer einfachen HTML-Listenstruktur zur Entwicklung eines Menüs von Links, das je nach Bildschirmgröße eines Geräts unterschiedlich gestaltet und gerendert werden kann.

In diesem Tutorial werden wir CSS verwenden, um das folgende responsive Menü für mobile Geräte, Tablets und Desktops zu erstellen.

Für kleinere Bildschirme muss der Benutzer auf ein Hamburger-Symbol klicken, um die Menüpunkte anzuzeigen. Größere Bildschirme zeigen die Menüpunkte inline in der Navigationsleiste an.

In diesem Tutorial werden wir ein responsives Menü erstellen, einschließlich eines Hamburger-Symbols, ausschließlich mit reinem HTML und CSS.

Um zu beginnen, verwenden Sie Ihren bevorzugten Texteditor, wie zum Beispiel VS Code, und erstellen eine rails App, alternativ kann man zwei Dateien in einem gemeinsamen Ordner erstellen:

index.html für den HTML-Code
style.css für den CSS-Code

Kopieren Sie den Pfad der index.html-Datei und fügen Sie ihn in einen Browser ein, um die App zu testen.

Adding the HTML

Add the following code:

<!-- Navigation bar -->
<header class="header">
  <!-- Logo -->
  <a href="#" class="logo">b4um</a>
  <!-- Hamburger icon -->
  <input class="side-menu" type="checkbox" id="side-menu" />
  <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
  <!-- Menu -->
  <nav class="nav">
    <ul class="menu">
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Blog</a> </li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

Dieser Code enthält die Struktur und den Inhalt der Webseite. Er enthält auch einen Verweis auf das CSS-Stylesheet.

Wir verwenden die semantischen Tags <header> und <main>, um die Navigationsleiste und den Hauptinhalt der Seite zu trennen.

Wir fügen ein Logo mit dem <a>-Anker-Tag hinzu.

Schließlich erstellen wir ein Hamburger-Menü mithilfe eines Checkbox-Hacks. Mit dieser Strategie können wir das Menü basierend darauf gestalten, ob das Kontrollkästchen aktiviert ist.

Wir verwenden ein <label>-Tag, um das Symbol für das Hamburger-Menü zu definieren. Das <input>-Tag wird verwendet, um das Menü je nach Zustand des Kontrollkästchens (Klasse side-menu) bedingt anzuzeigen.

Dann fügen wir die Menüpunkte als Listenelemente <li> in einer ungeordneten Liste <ul> hinzu. Das <nav>-Tag dient als Listencontainer.

Hier ist die Ausgabe nur mit HTML:

Hinzufügen des CSS

Jetzt werden wir CSS verwenden, um die verschiedenen UI-Komponenten und Funktionen zu gestalten:

Den Inhalt und den Hintergrund gestalten
Den Header und das Logo gestalten
Das Navigationsmenü gestalten
Das Hamburger-Menü-Symbol gestalten
Das gestaltete Menüsymbol umschalten
Responsivität hinzufügen

Hier ist der Abschnitt zum Gestalten des Inhalts und des Hintergrunds. Sie können den folgenden Code einfügen:

/* variables*/
:root {
  --white: #f9f9f9;
  --black: #36383F;
  --gray: #85888C;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

Dieser Code importiert die Google-Schriftart Poppins für die Verwendung in der App.

Wir definieren CSS-Variablen für die Farben, die in der App verwendet werden sollen. Dann setzen wir CSS zurück, um die Standardeinstellungen des Browsers für margin, padding, box-sizing, text-decoration und list-style zu entfernen.

Gestaltung des Headers und Logos

Der folgende Code fügt dem Header eine schwarze Hintergrundfarbe und einen grauen Box-Schatten hinzu. Um den Header während des Scrollens oben auf dem Bildschirm zu halten, geben wir eine sticky Position und einen Null-Abstand zum oberen Rand an. Außerdem passen wir den Header so an, dass er sich über die gesamte Breite des Geräts erstreckt:

/* Header */
.header {
  background-color: var(--black);
  box-shadow: 1px 1px 5px 0px var(--gray);
  position: sticky;
  top: 0;
  width: 100%;
}
/* Logo */
.logo {
  background-color: var(--black);
  display: inline-block;
  color: var(--white);
  font-size: 60px;
  margin-left: 10px;
}

Wir gestalten das Logo, indem wir die Farbe, Schriftgröße und den linken Rand angeben. Nicht zu verwechseln mit Padding, ist der [Margin] der Bereich um das Logo, der es von anderen Elementen trennt.

Gestaltung des Navigationsmenüs

Im folgenden Code geben wir die Breiten- und Höheneigenschaften von 100 Prozent für das <nav>-Element an, um den Inhalt an den Bildschirm anzupassen. Anschließend geben wir eine feste Position an, um das Navigationsmenü über dem Hauptinhalt der App zu überlagern. Wir wählen auch eine schwarze Hintergrundfarbe für das <nav>-Element aus und geben an, dass jeglicher Überlaufinhalt aus dem <nav>-Element versteckt werden soll.

Für die Menü-Link-Elemente geben wir ein Blockformat-Display an, fügen Padding und Farbe hinzu und ändern die Hintergrundfarbe von Weiß auf Grau beim Hover-Zustand.

Schließlich verwenden wir die CSS-[transition]-Eigenschaft und eine max-height von null, um das <nav>-Element standardmäßig auszublenden, aber es bei einem Klick auf das Menüsymbol anzuzeigen:

/* Nav menu */
.nav {
  width: calc(100% - 1.1rem);
  height: 100%;
  position: fixed;
  background-color: var(--black);
  overflow: hidden;

}

.menu a {
  display: block;
  padding: 30px;
  color: var(--white);
}

.menu a:hover {
  background-color: var(--gray);
}

.nav {
  max-height: 0;
  transition: max-height .5s ease-out;
}

Hier ist die Ausgabe, die das gestaltete Navigationsmenü zeigt:

Gestaltung des Hamburger-Menüs

Im folgenden Code geben wir an, dass ein Zeigerzeiger angezeigt werden soll, wenn ein Benutzer mit dem Hamburger-Menü interagiert. Wir positionieren das Label-Element rechts und fügen etwas Padding hinzu.

Als Nächstes gestalten wir das span-Element, um die drei Menüsymbol-Linien zu erstellen.

Wir verwenden die CSS-Pseudo-Elemente [::before] und [::after] auf dem span-Element, um die drei Linien des Hamburger-Symbols zu definieren.

Der Selektor .hamb-line definiert die Mitte - oder zweite - Linie. Die .hamb-line::before und .hamb-line::after positionieren die erste und dritte Linie jeweils 5px über und unter der Mittellinie.

Schließlich verwenden wir die display-Eigenschaft auf .side-menu, um das Kontrollkästchen auszublenden:

/* Menu Icon */
.hamb {
  cursor: pointer;
  float: right;
  padding: 16px 20px;
}

.hamb-line {
  background: var(--white);
  display: block;
  height: 2px;
  position: relative;
  width: 24px;

}

.hamb-line::before,
.hamb-line::after {
  background: var(--white);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.hamb-line::before {
  top: 5px;
}

.hamb-line::after {
  top: -5px;
}

/* Hide checkbox */
.side-menu {
  display: none;
}

Gestaltung des umgeschalteten Menüsymbols

Im folgenden Code gestalten wir das Hamburger-Menüsymbol, um sein Aussehen beim Anhaken zu ändern. Zuerst geben wir die max-height des <nav>-Elements an, wenn das Kontrollkästchen ausgewählt ist (Klasse .side-menu:checked).

Dann folgen wir einem zweistufigen Prozess, um ein "x"-förmiges Schließsymbol zu erstellen, um anzuzeigen, dass das Kontrollkästchen ausgewählt ist. Zuerst verbergen wir die zweite Linie des Hamburger-Symbols, indem wir ihren Hintergrund auf transparent setzen. Dann drehen wir die erste und dritte Linie um -45 bzw. 45 Grad, um eine "x"-Form zu bilden:

/* Toggle menu icon */
.side-menu:checked~nav {
  max-height: 100%;
}
.side-menu:checked~.hamb .hamb-line {
  background: transparent;
}
.side-menu:checked~.hamb .hamb-line::before {
  transform: rotate(-45deg);
  top: 0;
}
.side-menu:checked~.hamb .hamb-line::after {
  transform: rotate(45deg);
  top: 0;
}

Hier ist die Ausgabe, die das umgeschaltete Menü zeigt:

Hinzufügen von Responsivität

Um die App responsiv zu gestalten, können wir Media Queries verwenden, um CSS-Eigenschaften bedingt einzubeziehen. Mit anderen Worten werden die Eigenschaften innerhalb einer Media Query nur auf die Webseite angewendet, wenn die festgelegte Bedingung gültig ist.

/* Responsiveness */
@media (min-width: 768px) {
  .nav {
    max-height: none;
    top: 0;
    position: relative;
    float: right;
    width: fit-content;
    background-color: transparent;
    z-index: 100;
    margin-top: -12px;
  }
  .menu li {
    float: left;
  }
  .menu a {
    padding: 0 1.5rem;
  }
  .menu a:hover {
    background-color: transparent;
    color: var(--gray);
  }
  .hamb {
    display: none;
  }
}

In diesem Code fügen wir eine @media-Regel mit der Gerätebedingung für eine mindestens 768px breite Ansicht hinzu. Wir möchten, dass Geräte mit dieser Mindestbreite das vollständige Navigationsmenü sehen, anstelle des Hamburger-Menüs.

Wir entfernen die max-height-Eigenschaft des <nav>-Elements, indem wir sie auf none setzen.

Wir positionieren das <nav>-Element oben rechts auf dem Bildschirm und geben seine Breite mit fit-content an.

Wir floaten die Menülistenpunkte links vom <nav>-Element. Die Hintergrundfarbe wird auf transparent und die Menülistenpunkte beim Überfahren auf grau festgelegt.

Schließlich verwenden wir die display-Eigenschaft, um das Hamburger-Menüsymbol auszublenden.

Hier ist die vollständig gestaltete App:

Meld dich an und schreibe ein Kommentar