Jak udělat vyjížděcí menu

Tenhle díl navazuje na Jak udělat web z více stránek, kde máme společné menu. Teď z něj uděláme vyjížděcí menu. Předpokládám základy CSS – když si nejste jistí, mrkněte nejdřív na HTML a CSS za 15 minut.

Co budeme dělat

Ukážeme si dvě věci, které se často pletou pod jeden pojem „vyjížděcí menu":

• Rozbalovací podmenu (dropdown) – po najetí na položku (třeba „Služby") se pod ní rozbalí další odkazy. Zvládneme ho čistě v CSS.
• Hamburger menu na mobilu – na úzké obrazovce se menu schová pod ikonu ☰ a po klepnutí vyjede. K tomu přidáme pár řádků JavaScriptu.

1. Rozbalovací podmenu (dropdown)

Podmenu vložíme dovnitř položky, ke které patří. Kolem odkazu a jeho podmenu dáme obal <div class="has-sub">:

<nav class="menu">
  <a href="index.html">Domů</a>

  <div class="has-sub">
    <a href="sluzby.html">Služby ▾</a>
    <div class="sub">
      <a href="tvorba.html">Tvorba webů</a>
      <a href="udrzba.html">Údržba webů</a>
    </div>
  </div>

  <a href="kontakt.html">Kontakt</a>
</nav>

Teď to v CSS schováme a ukážeme až po najetí myší:

.has-sub { position: relative; }        /* kotva pro podmenu */

.sub {
  display: none;                        /* schované */
  position: absolute;
  top: 100%;                            /* hned pod položkou */
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  min-width: 160px;
}

.has-sub:hover .sub { display: block; } /* po najetí ukázat */

Co se tu děje: position: absolute vytáhne podmenu z toku stránky, aby nikoho neodsouvalo, a position: relative na obalu .has-sub říká „umísti ho vůči mně". Pravidlo .has-sub:hover .sub ukáže podmenu, jen když myš je nad položkou.

2. Hamburger menu na mobilu

Princip: na počítači necháme menu v řádku, na mobilu ho schováme a místo něj ukážeme ikonu ☰. Klepnutí na ni menu vysune. Přepínání zařídí jeden řádek JavaScriptu, který přidává a odebírá třídu open:

<button class="ham"
  onclick="document.querySelector('.menu').classList.toggle('open')">
  ☰
</button>

<nav class="menu">
  <a href="index.html">Domů</a>
  <a href="sluzby.html">Služby</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

A CSS, kde se pomocí @media chová menu jinak na úzké obrazovce:

.ham  { display: none; }              /* na počítači skryté */
.menu { display: flex; gap: 18px; }  /* menu v řádku */

@media (max-width: 600px) {
  .ham  { display: block; }          /* ukázat ikonu ☰ */
  .menu { display: none; }           /* menu schovat */
  .menu.open {                       /* po klepnutí na ☰ */
    display: flex;
    flex-direction: column;          /* položky pod sebou */
  }
}

Klíčové je classList.toggle('open'): když třída open na menu není, přidá ji (menu se zobrazí), a když tam je, odebere ji (menu se schová). Jedním klepnutím tak menu střídavě vyjede a zase se schová.

Časté chyby

• Podmenu vyskočí na špatné místo. Chybí position: relative na obalu .has-sub – bez něj se absolutní podmenu umístí vůči celé stránce.
• Podmenu zmizí dřív, než na něj najedete. Hover musí platit pro celý obal .has-sub (odkaz i podmenu), ne jen pro odkaz – a mezi nimi nesmí být mezera.
• Hamburger nereaguje. Zkontrolujte, že se název třídy v JS (.menu, open) přesně shoduje s CSS. Překlep nebo jiná velikost písmen a nic se neděje.
• Menu je na mobilu pořád vidět. Chybí .menu { display: none; } uvnitř @media, nebo je špatně nastavený breakpoint.
• Na telefonu nejde dropdown. To je normální – hover na dotyku není. Na malých obrazovkách spoléhejte na hamburger (klik), ne na najetí myší.

Co dál?

Máte menu, které funguje na počítači i na mobilu. Vzhled (barvy, mezery, zvýraznění aktuální stránky) doladíte podle návodu Barvy, písmo a rozvržení v CSS. A pokud si chcete zopakovat, jak menu propojit napříč stránkami, vraťte se na Web z více stránek.