Vyskakovací menu v CSS

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:

    To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

    Sledujte:

     

    Připomínky mi pište do komentářů ↓

    Vodorovné menu

    Horizontální navigace

    Různé možnosti, jak vytvořit vodorovné menu s odkazy vedle sebe.

    Fixní menu při scrollování

    Fixní menu při rolování

    Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

    Responsivní menu

    Responsivní navigace

    Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

    Menu přes celou šířku

    Menu přes celou šířku

    Jak vytvořit vodorovné menu s neznámým počtem položek přes celou šířku.

    Hover efekty s box-shadow

    Hover efekty s box-shadow

    Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

    Komentáře