Menubar

by hambern

HTML

<nav id="navbar">
      <div class="menu">Meny</div>
      <div id="hamburger" class="hamburger">☰</div>
    </nav>

    <!-- Innehåll för att skapa scroll-möjligheter -->
    <div class="content">
      Scrolla ner för att se effekten, klicka sedan på hamburgermenyn för att visa menyn igen.
    </div>

CSS

body {
  margin: 0;
}
/* Grundläggande styling för navbaren */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1em;
  background: #eee;
  transition: background 0.3s;
}

/* Standardmenyn visas som default */
.menu {
  display: block;
}

/* Hamburgermenyn döljs initialt */
.hamburger {
  display: none;
  cursor: pointer;
}

/* När navbaren har klassen "scrolled" byts visningen */
nav.scrolled {
  background: none;
}

nav.scrolled .menu {
  display: none;
}

nav.scrolled .hamburger {
  display: block;
}

/* Lite styling för innehållet */
.content {
  height: 200em;
  margin: 1em;
  padding-top: 4em;
}

JavaScript

// Funktion som hanterar scroll-beteendet
window.addEventListener("scroll", function() {
  var nav = document.getElementById("navbar");
  // Om vi scrollat förbi 20 pixlar...
  if (window.scrollY > 20) {
    nav.classList.add("scrolled");
  } else {
    // Ta bort klasserna om vi scrollat upp igen
    nav.classList.remove("scrolled");
  }
});

// Funktion för att toggla menyn vid klick på hamburgersymbolen
document.getElementById("hamburger").addEventListener("click", function() {
  var nav = document.getElementById("navbar");
  // Toggle-klassen "open" för att visa eller dölja menyn
  nav.classList.toggle("scrolled");
});