Vyjížděcí menu v CSS
Jak vytvořit v čistém CSS vyskakovací menu.
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í.
- Normálně je element skrytý (
display: none), - při
:hoveru se přepne nablock/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…
U vyskakovacího menu bývá dobrá nějaká tolerance nepřesnosti pohybu, zabývá se tím samostatný článek:
Co si myslíte o tomto článku?
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.