Chytrá komponenta
Menu s hamburgerem
Na telefonu je menu schované pod tlačítkem ☰. Na širší obrazovce se samo rozbalí do řádku vedle loga.
Jedno HTML, dvě podoby a ani řádek JavaScriptu. V náhledu vidíte desktop, telefon přijde na řadu hned.
Struktura
Logo, tlačítko a menu
V hlavičce je logo, tlačítko s ikonou ☰ a navigace. Začínáme na telefonu, podle lekce Mobile first.
Ikona ☰ připomíná hamburger, odtud název. Tlačítko má aria-label, aby screen reader neohlásil jen „tlačítko“.
Atributy
Otevírání bez JavaScriptu
Atribut popover navigaci schová. Tlačítko s popovertarget="menu" ji pak otevírá a zavírá. Všechno zařídí prohlížeč.
Menu jsme v náhledu otevřeli za vás. Zavřete ho klávesou Esc nebo kliknutím vedle a zkuste ho otevřít tlačítkem ☰.
Styl
Logo vlevo, tlačítko vpravo
Hlavička je flexbox. Tlačítko dostane border a dost velkou plochu, aby se do něj dalo trefit palcem.
Styl
Panel přes celou výšku
Otevřené menu z prostředka obrazovky přesuneme k pravému okraji jako panel přes celou výšku. Pseudoelement ::backdrop ztmaví stránku za ním.
inset: 0 0 0 auto přilepí panel nahoru, doprava a dolů. Zleva zůstane volno.
Atributy
Tlačítko pro zavření
Zavřít jde i klávesou Esc nebo klepnutím vedle panelu, ale viditelné tlačítko ✕ čeká každý. popovertargetaction="hide" menu jen zavře, nikdy neotevře.
Automatika
Na širší obrazovce se menu rozbalí samo
Od 700 pixelů výš tlačítka schováme a navigaci přepíšeme zpátky na obyčejnou součást hlavičky: bez panelu, bez stínu, odkazy v řádku.
display: block přebije pravidlo prohlížeče, které neotevřený popover schovává. Na desktopu je tak menu vidět pořád.
Kontrola
Jedno HTML, dvě podoby
Zpátky na telefonu je hamburger i panel jako dřív. Pravidla pro desktop platí jen od 700 pixelů výš.
Přepínejte klávesou M mezi telefonem a desktopem a sledujte, jak se menu mění.
Recept
Menu s hamburgerem v kostce
popover+popovertarget: otevírání bez JavaScriptu- Esc a klepnutí vedle zavřou menu samy
- na desktopu
display: blockmenu trvale ukáže - tlačítka s ikonou potřebují
aria-label
Starší trik se schovaným checkboxem (checkbox) funguje taky, ale screen readery ho ohlásí jako checkbox, ne jako tlačítko menu.