Menu přes celou šířku

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

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.

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.

Hover efekty s box-shadow

Hover efekty s box-shadow

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

Komentáře