Jak udělat hamburger menu: jednoduchý návod v HTML a CSS

06/2025 2 minuty čtení Průvodce programováním návod, praxe

Pokud jste absolvovali moje online kurzy programování v HTML a CSS, možná už experimentujete s vlastním kódem a hledáte další praktické výzvy. Chcete přidat něco, co udělá váš web ještě profesionálnější? Něco, co se běžně používá na reálných stránkách? Pak je tu právě pro vás návod na vytvoření hamburger 🍔 menu – tedy ikonky, která po kliknutí zobrazí nebo skryje nabídku.

Takové menu se běžně používá na mobilních webech, kde je méně místa. Je to skvělá příležitost, jak si vyzkoušet responzivní design a naučit se prakticky využít kombinaci HTML a CSS. Zvládnete to i bez JavaScriptu.

🧱 1. HTML struktura

Začněme jednoduchou strukturou stránky s menu a s hamburger tlačítkem.

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">☰</label>

<nav class="menu">
  <a href="#">Domů</a>
  <a href="#">O nás</a>
  <a href="#">Služby</a>
  <a href="#">Kontakt</a>
</nav>

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">☰</label>

<nav class="menu">
  <a href="#">Domů</a>
  <a href="#">O nás</a>
  <a href="#">Služby</a>
  <a href="#">Kontakt</a>
</nav>

Co tu vidíme:

<input type="checkbox"> slouží jako „přepínač“, který budeme stylovat.
<label> s třemi čárkami ☰ slouží jako ikona hamburgeru.
<nav> obsahuje samotné odkazy.

🎨 2. Základní stylování

Nyní přidáme stylování, které celé menu skryje a zobrazí ho až po kliknutí na hamburger ikonu.

/* Schovej checkbox */
#menu-toggle {
  display: none;
}

/* Ikona menu */
.menu-icon {
  display: block;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
}

/* Menu – výchozí stav */
.menu {
  display: none;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 10px;
}

.menu a {
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}

/* Zobraz menu, když je checkbox zaškrtnutý */
#menu-toggle:checked + .menu-icon + .menu {
  display: flex;
}

/* Schovej checkbox */
#menu-toggle {
  display: none;
}

/* Ikona menu */
.menu-icon {
  display: block;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
}

/* Menu – výchozí stav */
.menu {
  display: none;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: 10px;
}

.menu a {
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}

/* Zobraz menu, když je checkbox zaškrtnutý */
#menu-toggle:checked + .menu-icon + .menu {
  display: flex;
}

📱 3. Responzivní chování (volitelné)

Pokud chcete, aby se menu na větších obrazovkách zobrazovalo vždy a pod hamburger ikonu se schovalo pouze na malé obrazovce (typicky na mobilu), přidejte do CSS ještě media query:

@media (min-width: 768px) {
  .menu-icon {
    display: none;
  }

  .menu {
    display: flex !important;
    flex-direction: row;
    gap: 20px;
  }

  #menu-toggle {
    display: none;
  }
}

@media (min-width: 768px) {
  .menu-icon {
    display: none;
  }

  .menu {
    display: flex !important;
    flex-direction: row;
    gap: 20px;
  }

  #menu-toggle {
    display: none;
  }
}

✅ Hotovo!

Nyní máte funkční hamburger menu, které:

funguje bez JavaScriptu,
je jednoduché na údržbu,
a reaguje na kliknutí.

Pokud jste absolvent/ka mých online kurzů programování, nic z tohoto kódu by vás nemělo příliš překvapit. :)

🎓 Tip na závěr

Tento způsob je ideální pro jednoduché weby. Pokud plánujete složitější funkcionalitu (např. animace nebo víceúrovňová menu), může se vám hodit do hry zapojit ještě JavaScript.