Hamburger menu bez JS

Hamburger menu se stal běžným prvkem mobilních webových stránek, protože umožňuje uživatelům rychlý přístup k navigaci a zároveň šetří místo na obrazovce. V tomto článku se podíváme na to, jak vytvořit mobilní hamburger menu pouze za použití HTML a CSS.

1. HTML struktura

Začneme vytvořením základní HTML struktury pro naše menu. Potřebujeme tři základní prvky - ikonu pro hamburger menu, kontejner pro menu a samotné položky menu. Zde je ukázka kódu:

<div class="navbar">
  <div class="menu-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="menu-items">
    <a href="#">Domů</a>
    <a href="#">O nás</a>
    <a href="#">Služby</a>
    <a href="#">Kontakt</a>
  </div>
</div>

Vidíte, že jsme vytvořili tři <span> elementy uvnitř <div> s třídou menu-icon. Tyto elementy budou sloužit jako čáry pro ikonu hamburger menu. Dále jsme vytvořili kontejner pro položky menu s třídou menu-items. V našem příkladu jsme vytvořili čtyři položky menu - "Domů", "O nás", "Služby" a "Kontakt".

2. CSS styly

Nyní přidáme CSS styly, abychom vytvořili vizuální efekt pro náš hamburger menu. Vytvoříme také tlačítko pro otevírání a zavírání menu.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 18px;
  cursor: pointer;
}

.menu-icon span {
  display: block;
  height: 3px;
  background-color: #333;
  border-radius: 3px;
}

.menu-items {
  display: none;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
}

.navbar.active .menu-items {
  display: flex;
}

@media only screen and (min-width: 768px) {
  .navbar {
    flex-direction: row;
    position: static;
    background-color: transparent;
  }

  .menu-icon {
    display: none;
  }

  .menu-items {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: static;
    background-color: transparent;