Sémantický element
<nav>
Označuje blok hlavních navigačních odkazů. Tedy menu, kterým se člověk pohybuje po webu.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Párový tag s odkazy uvnitř
Element nav má otevírací i zavírací tag. Mezi ně vložíme odkazy <a>.
Sám o sobě nav nijak nevypadá. Je to jen wrapper, který říká, co uvnitř je.
Zápis
Odkazy patří do seznamu
Menu je výčet možností. Proto odkazy zabalíme do nečíslovaného seznamu ul a každý do položky li.
Screen reader teď nevidomému oznámí „seznam, 4 položky“. Odrážky odstraníme později pomocí CSS.
Atributy
Jen globální atributy
nav nemá žádné vlastní atributy. Používá ty, které má každý element: id, class, lang, aria-*…
Nejužitečnější je aria-label, který navigaci pojmenuje.
V náhledu se nic nezměnilo. Popisek slouží screen readerům.
Atributy
Kde právě jsem?
Odkaz na stránku, na které uživatel právě je, označíme atributem aria-current="page".
Zatím zase neviditelné. Za chvíli ho ale využijeme i pro styl.
Styl
Pryč s odrážkami
Seznam má od prohlížeče odrážky, margin a padding. V menu je nechceme.
Selektor nav ul zasáhne jen seznamy uvnitř navigace, ostatní seznamy na stránce zůstanou beze změny.
Styl
Do jedné řady
Flexbox postaví položky vedle sebe. Vlastnost gap mezi nimi udělá mezeru.
Styl
Klidné odkazy
Modrá a podtržení jsou výchozí styl odkazů. V menu je nahradíme tmavým textem bez podtržení.
Styl
Hover a aktuální stránka
:hover reaguje na kurzor. Atributový selektor [aria-current] zvýrazní stránku, na které jsme.
Jeden atribut tak poslouží dvakrát: screen readerům i vzhledu. Zkuste najet myší na odkaz v náhledu.
V kontextu
Navigace v hlavičce stránky
Hlavní menu obvykle sedí v header vedle loga. Flexbox je rozdělí na levou a pravou stranu.
Responzivita
A teď na mobilu
Náhled se přepnul na šířku telefonu: 375 pixelů. Logo a čtyři odkazy se do jedné řady sotva vejdou: menu se mačká, „O nás“ se láme na dva řádky a logo se tiskne k odkazům.
Mezi desktopem a mobilem můžete přepínat i sami, tlačítky nad náhledem nebo klávesou M.
Responzivita
Media query
Pravidla uvnitř @media platí jen tehdy, když je okno užší než zadaná šířka. Na mobilu dáme logo nad menu.
Přepněte náhled zpět na desktop. Media query přestane platit a menu bude zase vedle loga.
Shrnutí
Kdy použít nav
Ano
- hlavní menu webu
- obsah dlouhého článku
- drobečková navigace
Ne
- každá skupina odkazů, např. sociální sítě v patičce
Více elementů nav na jedné stránce odlište různým aria-label.