En responsiv navbar

När man bygger en responsiv webbplats så är det ofta önskvärt att även navigationsmenyn är responsiv. En vanlig lösning är att använda en så kallad “hamburger-meny” där menyn är dold bakom en ikon som ser ut som en hamburgare (tre horisontella linjer). När användaren klickar på ikonen visas menyn.

Tanken är att bygga en “hamburger-meny” som visas fullt ut när skärmen är bred, men när skärmen blir för smal så representeras menyn av en ikon som användaren kan klicka på för att visa eller dölja menyn.

Låt oss bygga upp strukturen som behövs, steg för steg.

HTML för header med navbar

Vi börjar med att skapa en ny HTML-mall som har en header med en navbar. Vi skapar en ny fil public/responsive-navbar.html med följande innehåll.

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navbar</title>
  <link rel="stylesheet" href="css/responsive-navbar.css">
</head>
<body>
  <header class="header">

    <div class="logo">My Logo</div>

    <nav class="navbar">
      <ul class="nav-links" id="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

  <script src="js/responsive-navbar.js"></script>
</body>
</html>

Studera hur HTML-koden är uppbyggd. Vi har en header som innehåller en div för logotypen och en nav för navigationsmenyn. Menyn är en lista ul li med länkar.

Ladda sidan i din webbläsare så du vet att det fungerar.

CSS för header med navbar

Vi lägger till en ny CSS-fil public/css/responsive-navbar.css med följande innehåll.

/**
 * Style for example showing responsive navbar.
 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

Vi kommer behöva en hel del mer CSS för att få till en snygg och funktionell header och navbar, men vi börjar så här.

Ladda om sidan i webbläsaren så kommer du att se att sidan har fått en grundläggande stil.

JavaScript för att hantera klick på hamburger-ikonen

VI lägger även till en ny JavaScript-fil public/js/responsive-navbar.js med följande innehåll.

/**
 * Enable a responsive navbar toggle.
 */
console.log('Hello navbar')

Ladda om sidan i webbläsaren så kommer du att se att JavaScript-koden körs och skriver ut “Hello navbar” i webbläsarens konsol.

Det kan se ut så här när du är helt klar med koden.

Image description — Bild: En start för exemplet med en responsiv navbar.