Hamburgare som meny-knapp

Nu är det dags att lägga till de responsiva delarna av menyn, vi lägger till en knapp som ser ut som en hamburgare och vi stylar den med CSS.

HTML för knapp som Hamburgare

I HTML-koden lägger vi till en rad som representerar knappen som ser ut som en hamburgare. Vi lägger till följande rad i nav-elementet i filen public/responsive-navbar.html.

Lägg till knapp för hamburgare i public/responsive-navbar.html

<nav class="navbar">
  <button class="menu-toggle" id="menu-toggle">&#9776;</button>
  <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>

☰ är en HTML-entity som representerar ett Unicode-tecken.

I det här fallet motsvarar det ☰, vilket kallas för hamburger-ikon. Det används ofta som knapp för responsiva menyer.

CSS för knapp som Hamburgare

Vi lägger till följande CSS i filen public/css/responsive-navbar.css för att ge grundläggande stil och beteende till hamburger-knappen

CSS för knapp för hamburgare i public/css/responsive-navbar.css

/* Hamburger menu button */
.menu-toggle {
  display: none;                   /* Hidden by default */
  background: none;                /* No background */
  border: none;                    /* No border */
  font-size: 1.8em;                /* Bigger font for hamburger icon */
  color: white;                    /* White color */
  cursor: pointer;                 /* Pointer cursor on hover */
}

Notera konstruktionen display: none; som gör att knappen är dold som standard. Vi kommer att visa den med hjälp av media queries senare.

Om du vill se hur knappen ser ut så kan du använda devtools och avvaktivera den CSS-regeln, då kan webbsidan se ut så här.

Bild: Här har vi använt devtools för att visa hamburgar-knappen.

×

Tanken är att vi skall använda en media query för att visa knappen på små skärmar och dölja navigationsmenyn. Vi återkommer till detta i nästa avsnitt.