Moderní tvorba webových aplikací

O webu

Horizontální navigace

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

5 minut

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).

    Související články

    Šíř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

    Zobrazení dlouhé URL

    Jak zobrazit dlouhé URL v aplikaci, aby nerozbila layout.

    6 minut

    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ů
    2013–2026