So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS

Eskere Guru

Der Aufbau einer reaktionsschnellen Navigationsleiste ist ein wesentlicher Bestandteil zur Verbesserung Ihrer Benutzererfahrung und Ihrer Webdesign-Fähigkeiten. In diesem Artikel zeigen wir Ihnen, wie Sie eine responsive Navigationsleiste nur mit HTML und CSS erstellen (nicht einmal eine einzige Zeile JavaScript!).

Wenn Sie also Anfänger sind, die Frontend-Entwicklung erlernen und eine Navigationsleiste erstellen möchten, sind Sie hier richtig. Aber bevor wir tiefer eintauchen, lassen Sie uns zunächst die grundlegenden Designprinzipien einer responsiven Navigationsleiste verstehen.

Voraussetzungen: Die drei Schlüsselelemente einer Navbar

Es liegt auf der Hand, dass die meisten Website-Betreiber neue Besucher gewinnen möchten. Der erste Schritt dazu ist, den Besuchern einen klaren und prägnanten Weg zu zeigen. Sie sollen eine Navigationsleiste bauen, die Neugier weckt und gleichzeitig Besucher anzieht. Beim Entwerfen einer idealen Navigationsleiste sollten Sie drei Schlüsselelemente haben:

Einfach

Es sollte klar und leicht zu lesen sein. Anstatt die Navigationsleiste mit Links zu jeder Seite zu überladen, sollten Sie sich für die breiteren Kategorien Ihrer Website entscheiden. Anschließend können Sie bei Bedarf Untermenüs in Form eines Dropdown-Menüs hinzufügen.

Bemerkbar

Eine einfache Navigationsleiste sollte nicht langweilig sein. Sie sollten sich an eine vorab festgelegte Markenfarbe halten, um das Design einheitlicher zu gestalten. Sie können mit zahlreichen Farbschemata experimentieren und hellere oder dunklere Farbtöne zum Hervorheben und Dropdown-Menüs verwenden.

Responsiv

Ein Bericht zur weltweiten Internetnutzung von Statista zeigt, dass 59,5 Prozent der Weltbevölkerung das Internet aktiv und 92,6 Prozent über mobile Geräte nutzen. Das ist mehr als genug, um zu verstehen, wie wichtig es ist, eine responsive mobile Navigation auf Ihrer Website zu implementieren.

Mobile Navigation auf höchstem Niveau ist sehr beliebt. Sie können ein Hamburger-Menü, eine Guillotine, schwebende Symbole und Registerkarten verwenden. Es ist eine Rettung, wenn Sie fünf oder mehr Kategorien mit mehreren Hierarchien haben. Die Navigation auf oberster Ebene kann erheblichen Platz auf dem Bildschirm sparen, insbesondere wenn Sie eine Website mit vielen Inhalten haben.

Tab-Leisten mit entsprechenden Symbolen passen perfekt in die untere Navigationsleiste, da sie normalerweise drei bis fünf Menüs auf derselben Hierarchieebene enthalten. Untermenüs und Folgemenüs folgen der Hauptkategorie mit der Eltern-Kind-Beziehung.

Erstellen einer responsiven Navigationsleiste mit Hamburger Menü

Jetzt, da Ihnen die Designprinzipien kristallklar sind, können wir mit der Erstellung des Menüs beginnen. Wir werden eine responsive Navbar mit CSS Flexbox und Media Queries von Grund auf neu erstellen.

Wie wird unsere Navigationsleiste aussehen? Es hat eine Navigation auf oberster Ebene mit:

  • Logo
  • Navigationsmenüs
  • Dropdown-Menü
  • Hamburger Menü (mit dem Checkbox-Hack)

Erste Schritte mit HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="style.css" />
 <title>Document</title>
 </head>
 <body>
 <nav class="navbar">
 <!-- LOGO -->
 <div class="logo">MUO</div>
 <!-- NAVIGATION MENU -->
 <ul class="nav-links">
 <!-- USING CHECKBOX HACK -->
 <input type="checkbox" id="checkbox_toggle" />
 <label for="checkbox_toggle" class="hamburger">&#9776;</label>
 <!-- NAVIGATION MENUS -->
 <div class="menu">
 <li><a href="/">Home</a></li>
 <li><a href="/">About</a></li>
 <li class="services">
 <a href="/">Services</a>
 <!-- DROPDOWN MENU -->
 <ul class="dropdown">
 <li><a href="/">Dropdown 1 </a></li>
 <li><a href="/">Dropdown 2</a></li>
 <li><a href="/">Dropdown 2</a></li>
 <li><a href="/">Dropdown 3</a></li>
 <li><a href="/">Dropdown 4</a></li>
 </ul>
 </li>
 <li><a href="/">Pricing</a></li>
 <li><a href="/">Contact</a></li>
 </div>
 </ul>
 </nav>
 </body>
 </html>

Wir haben das Dropdown-Menü im Service- (Haupt-)Menü. Wir können das Hamburger-Menü überspringen, während wir die Desktop-Navbar erstellen. Schließlich haben wir den Checkbox-Workflow noch nicht besprochen.

Ausgabe :

So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS - Getting started with HTML for navbar

Anwenden von Basic CSS: Dienstprogramme

 /* UTILITIES */
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: cursive;
 }
 a {
 text-decoration: none;
 }
 li {
 list-style: none;
 }

Im weiteren Verlauf gestalten wir unsere Navigationsleiste.

Die Navbar mit CSS Flexbox gestalten

Wir verwenden CSS Flexbox und wenden Hover-Effekte zum Hervorheben an. Das Service- Menü erfordert ein wenig zusätzliche Aufmerksamkeit, da Sie die Anzeige einstellen müssen : keine; für normale Bedingungen und stellen Sie die Anzeige ein: block; wenn jemand darauf schwebt.

 /* NAVBAR STYLING STARTS */
 .navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px;
 background-color: teal;
 color: #fff;
 }
 .nav-links a {
 color: #fff;
 }
 /* LOGO */
 .logo {
 font-size: 32px;
 }
 /* NAVBAR MENU */
 .menu {
 display: flex;
 gap: 1em;
 font-size: 18px;
 }
 .menu li:hover {
 background-color: #4c9e9e;
 border-radius: 5px;
 transition: 0.3s ease;
 }
 .menu li {
 padding: 5px 14px;
 }
 /* DROPDOWN MENU */
 .services {
 position: relative;
 }
 .dropdown {
 background-color: rgb(1, 139, 139);
 padding: 1em 0;
 position: absolute; /*WITH RESPECT TO PARENT*/
 display: none;
 border-radius: 8px;
 top: 35px;
 }
 .dropdown li + li {
 margin-top: 10px;
 }
 .dropdown li {
 padding: 0.5em 1em;
 width: 8em;
 text-align: center;
 }
 .dropdown li:hover {
 background-color: #4c9e9e;
 }
 .services:hover .dropdown {
 display: block;
 }

Ausgabe :

So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS - Navbar for desktop

Responsive Navbar mit CSS-Medienabfragen

Wie besprochen haben wir ein Hamburger-Menü, das nur auf Mobilgeräten mit kleinen Bildschirmgrößen angezeigt wird. Dafür haben wir zwei Kinder von <ul class=”nav-links”> . Zuerst verwenden wir input type=”checkbox” und geben dem Label a class=”hamburger” . Zweitens geben wir unserem Navigationsmenü class="menu" .

Beachten Sie, dass &#9776; ist eine HTML-Entität, die das ☰ (Hamburger-Symbol) anzeigt.

 <body>
 <nav class="navbar">
 <!-- LOGO -->
 <div class="logo">MUO</div>
 <!-- NAVIGATION MENU -->
 <ul class="nav-links">
 <!-- USING CHECKBOX HACK -->
 <input type="checkbox" id="checkbox_toggle" />
 <label for="checkbox_toggle" class="hamburger">&#9776;</label>
 <!-- NAVIGATION MENUS -->
 <div class=”menu”>...</div>
 </ul>
 </nav>
 </body>

Die Logik hinter der Verwendung des checkbox-Elements besteht darin, dass es angezeigt wird, wenn es nicht markiert ist : none; während es aktiviert ist, ändert es die CSS-Eigenschaft des allgemeinen Geschwisterselektors (~), indem es auf display setzt: block ; Einfach gesagt, verwenden wir das Kontrollkästchen zum Umschalten des Hamburgers und der Navigationsmenüs zwischen dem erweiterten und dem ausgeblendeten Zustand.

Gestalten Sie die Navigationsleiste für Mobilgeräte mithilfe von CSS-Medienabfragen wie unten gezeigt. In diesem Fall können Sie auch CSS Grid und JS für das mobile Menü verwenden .

 /*RESPONSIVE NAVBAR MENU STARTS*/
 /* CHECKBOX HACK */
 input[type=checkbox]{
 display: none;
 }
 /*HAMBURGER MENU*/
 .hamburger {
 display: none;
 font-size: 24px;
 user-select: none;
 }
 /* APPLYING MEDIA QUERIES */
 @media (max-width: 768px) {
 .menu {
 display:none;
 position: absolute;
 background-color:teal;
 right: 0;
 left: 0;
 text-align: center;
 padding: 16px 0;
 }
 .menu li:hover {
 display: inline-block;
 background-color:#4c9e9e;
 transition: 0.3s ease;
 }
 .menu li + li {
 margin-top: 12px;
 }
 input[type=checkbox]:checked ~ .menu{
 display: block;
 }
 .hamburger {
 display: block;
 }
 .dropdown {
 left: 50%;
 top: 30px;
 transform: translateX(35%);
 }
 .dropdown li:hover {
 background-color: #4c9e9e;
 }
 }

Folgendes haben wir gebaut:

Desktop

So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS - Navbar for desktop with dropdown menu

Mobile Geräte

So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS - Responsive navigation bar with hamburger menu

Experimentieren ist der beste Weg, um Ihre ideale Navigationsleiste zu entwerfen

Eine gute Website-Navigation wirkt sich stark auf Absprungraten und Konversionsraten aus. Im Wesentlichen sollte die erste Faltung Ihrer Website einen klaren Kontext, eine hierarchische Navigation und einen Call-to-Action aufweisen. Ihre Website-Navigationsstruktur sollte Besuchern helfen, mit drei Klicks oder weniger auf den beliebten oder angesagten Seiten Ihrer Website zu landen. Experimentieren Sie also weiter und entwerfen Sie eine bessere Site-Navigation!