Moderní tvorba webových aplikací
O webu

Vyjížděcí menu v CSS

Jak vytvořit v čistém CSS vyskakovací menu.

3 minuty

V kaskádových stylech lze využít pseudo třídy :hover a docílit tak toho, že při najetí myší na nějakou položku se jiná objeví.

  1. Normálně je element skrytý (display: none),
  2. při :hoveru se přepne na block/inline.

Ahoj… Světe!

Funguje to od Internet Exploreru 7, starší umí :hover jen na odkazech.

Menu jako na Alza.cz

Pokud se k výše uvedenému principu přidá špetka dalšího CSS, může to vypadat takto…

  • Vyskakovací
  • Menu
  • Pomocí
  • CSS
  • U vyskakovacího menu bývá dobrá nějaká tolerance nepřesnosti pohybu, zabývá se tím samostatný článek:

    Související články

    Jak udělat input s automatickou šířkou podle obsahu

    Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.

    9 minut

    Šířka znaků ve fontech

    Proč mají znaky různou šířku a jak to řešit v responsivním designu.

    17 minut

    CSS @starting-style

    Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.

    12 minut

    CSS pseudo element ::marker

    CSS pseudo element ::marker umožňuje stylovat odrážky seznamů

    4 minuty

    Novinky e-mailem

    Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

    Přidej se k 500+ čtenářům
    Jen kvalitní obsah
    Žádný spam

    Web jecas.cz píše Bohumil Jahoda, kontakt
    Seznam všech článků · Témata
    2013–2026