Moderní tvorba webových aplikací

O webu

Menu přes celou šířku

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

3 minuty

Úkol je jasný. Vytvořit navigaci, která může mít proměnlivý počet položek. Cílem je, aby se položky přesně roztáhly ve vymezeném prostoru.

Dělení šířky

První asi každého napadne vzít šířku navigace, vydělit ji počtem položek. Od takto vzniklé šířky v případě obsahového box modelu odečteme padding s borderem a je to.

(Dostat položky vedle sebe s možností zadat šířku jde řešit obtékáním nebo přes display: inline-block).

Problém je, že při změně počtu položek budeme muset všechny hodnoty přepočítávat. Podpora počítání přímo v CSS pomocí vlastnosti calc je až od IE 9.

Různá šířka a ladění paddingu

V případě položek s různou šířkou je často k vidění vytváření menu laděním paddingu od oka tak, aby to jakž takž hezky vyšlo.

Docílit perfektního vzhledu funkčního napříč prohlížeči i s různými velikostmi písma je takřka nemožné.

Použít tabulku

Mnohem funkčnější a elegantnější se zdá použití tabulky. Nemusí se nutně jednat o skutečnou HTML tabulku, ale od IE 8 fungují CSS atrapy (tabulkové hodnoty vlastnosti display).

Není problém (to jde nastavením width / využitím table-layout: fixed) nebo , aniž by se něco rozbilo. Tedy jde i vcelku pohodlně měnit počet odkazů a délku jejich textů.

Flexboxy

Docílit efektu, který nabízí CSS tabulka by šlo i flexboxy, ale jejich podpora je až od IE 10.

Související články

Vložení CSS do stránky

Jakými všemi způsoby připojit CSS do stránky.

9 minut

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025