Vodorovné menu

Asi nejjednodušší možnost vytvoření navigace s odkazy vedle sebe je prosté naházení odkazů do <div>u.

To není úplně špatné:

  • jednotlivé odkazy můžeme (text-decoration: none),
  • nějak hezky (background: #fff),
  • přidat (padding: .3em),
  • nebo (text-align: center pro nadřazený element)

Jakmile ale bude potřeba měnit výšku nebo šířku jednotlivých odkazů, narazíme na problém, protože odkazy jsou řádkové. Naštěstí existují způsoby, jak dostat vedle sebe i bloky.

Inline-block

Přidáním display: inline-block pro získáme výhodu řádkových i blokových elementů najednou.

Vše bude fungovat jako dřív a navíc půjde . Bezproblémové je samozřejmost.

Obtékání

Druhá možnost je položky menu nechat obtékat. Nicméně nevidím důvod pro použití obtékání místo řešení s inline-block. Nenapadá mě žádná výhoda takového postupu.

Snad jen může být problém v mezerách mezi položkami, které vzniknou při inline-block řešení a umístěním každného odkazu v HTML kódu na zvláštní řádek. Řešením je umístit všechny odkazy ihned za sebe nebo odřádkování zakomentovat.

   <a href=#>Odkaz</a><!--
--><a href=#>Odkaz</a>

Nebo nakonec opravdu použít ten float.

  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Kromě nevýhody, že je nutné řešit clearování bude obtíženější obtékané menu vycentrovat.

    Sémantika

    Někdo by mohl namítat, že menu patří do značky <menu> nebo alespoň seznamu (<ul>) a odkazy do položek <li>. Osobně se domnívám, že takové strukturování prakticky nikdo neocení a je to jen práce navíc. Ale nic neřešitelného to také nepředstavuje.

    V podstatě stačí jen vynulovat margin a padding, odstranit odrážky (listy-style: none) a z položek udělat třeba řádkové elementy (display: inline).

  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Fixní menu

    Vodorovné menu není problém na stránce (position: fixed), může být samozřejmě i fixované jen někdy podobně jako boční panel.

    Vycentrování fixního menu lze zajistit přes left: 50%; margin-left: -(polovina šířky).

    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ářů ↓

    Vyskakovací menu v CSS

    Vyjížděcí menu v CSS

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

    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