Jak na menu na horní liště?
Co chceme od horní navigační lišty obsahující položky menu a jaké otázky je dobré si zodpovědět, než začneme psát kód?
3.3.2023 | doba čtení: asi 5 min
Takže co chceme od horní navigační lišty obsahující položky menu a jaké otázky je dobré si zodpovědět, než začneme psát kód?
Možná základní otázka je:
- Kolik vlastně menu bude obsahovat položek?
A aby to bylo trochu komplikovanější:
- Bude vždy na každé stránce mít stejně položek? A pokud ano budou mít stejné názvy?
- Má být menu vždy viditelné, nebo má zajíždět nahoru se stránkou?
Asi víte, že stálé zobrazení menu zajistíme css vlastností position: fixed nebo sticky.
Asi chceme trochu odlišné chování při různé velikosti obrazovky, tedy při různé šířce viewportu. Při velkém viewportu může být kdekoli. Vlevo, vpravo či uprostřed.
Řekněme ale, že chceme menu uprostřed. No a zde už máme malou otázku k úvaze. Co má být uprostřed a co to znamená?
Chceme stejnou vzdálenost od okrajů obrazovky celého kontejneru <ul> nebo prvního respektive posledního písmena menu?
Dále jaké chceme mezery mezi jednotlivými položkami menu? Uvědomme si totiž, že název každé položky menu bude určitě jinak dlouhý. Mají být mezery mezi názvy stejné? Pak budou muset mít všechna <li> menu stejný inline padding. Ovšem jednotlivé kontejnery <li> pak nebudou stejně široké.
Kromě počtu položek v menu tedy vyjdeme i z toho, jak budou názvy těchto položek dlouhé. Zde jde samozřejmě o nalezení synergie obsahu a formy, kde samozřejmě informační obsah bude mít většinou přednost a design se bude muset přizpůsobit. Jednou z možností jak problematiku odlišné délky názvů do jisté míry řešit je také použití neviditelného písmene, které vložíme pomocí následujícího zaklínadla: " "
Zde je třeba také vzít v úvahu, zda budeme kontejnery <li> nějak graficky oddělovat. Například barevným odlišením při :hover a nebo pro indikaci, že jsme na stránce odpovídající odkazu v menu. To se může hodit i při řešení mobilní navigace pokud chceme použít záložky neboli tabs místo známého rozbalovacího hamburgříku. Použití záložek pro mobilní rozhraní doporučujeme pokud má menu maximálně pět položek.
Odpovědi na tyto otázky se budou lišit právě v závislosti na šířce viewportu. Při širokém viweportu jsou například vzdálenosti začátku a konce menu od okrajů stránky větší a tudíž rozdíly mezi vzdálenosti vpravo a vlevo je zanedbatelnější než na mobilním zobrazení.
Je přirozené, že i přes jasné definování vzhledu a chování našeho menu povedou k totožnému cíli různé cesty. Ať už použijeme Grid, Flexbox, nebo jinou techniku, asi se nevyhneme použití media queries a stanovení breakpointů. Rozhodně si prosím neberte příklad z těchto stránek, které ač možná vypadají a fungují relativně korektně, byly vytvořeny metodou bastlení, pytlíkování, matlání a mastění. Nejraději bych je celé udělal znova s čistějším kódem. Ale je často prací web developerů hrabat se ve zbastleném kódu a snažit se v něm vyznat a opravit jej. Mnoho času pak strávíte zkoumáním webu v developerské konzoli.
Každopádně moderní stránky by měli být samozřejmě responzivní, ale pokud chceme být opravdu estetičtí pak i takzvaně fluidní. O fluidní typografii a spacingu něco málo v jednom z příštích článků.
Pakliže totiž správně přistoupíme k responzivitě a fluidnosti již od začátku zejména správným použití vhodných jednotek rozměrů jako jsou vh, vw, %, fr a jiné a dodržíme pár zásad, jako že šířku elementů má určovat spíše rodič (parent element), zatímco výšku spíše potomek (child element), což platí i pro jeden z hlavních rozdílů mezi Gridem a Flexboxem respektive, ušetříme si mnoho frustrace, bolehlavu a bastlení s breakpointy a mediaqueries a náš kód bude lehký a elegantní jako baletka v Labutím jezeře.
Byl pro vás tento článek přínosný? Chcete-li můžete poslat příspěvek na kávu, která pomohla tento článek napsat.
Sdílet:
