Skrývání a zobrazování

Poslední část, která se na mobil nevejde, je navigace: logo, tři odkazy a tlačítko Přispět potřebují víc místa, než má obrazovka mobilu. Většina webů to řeší stejně: na mobilu odkazy skryje a místo nich ukáže tlačítko Menu, které po klepnutí odkazy zobrazí. Na počítači vidíte odkazy, a ne tlačítko.

Do záhlaví jsme přidali tlačítko Menu, podobné tomu, které jste v lekci Flexbox, Grid a pozice skryli třídou hidden. Je to prvek button vedle tlačítka Přispět, a aby obě zůstala pohromadě vpravo, jsou v novém prvku div se třídami flex gap-2. Zatím je tlačítko vidět v každé šířce.

Ke skrytí prvku znáte z lekce Flexbox, Grid a pozice třídu hidden (display: none). S předponou můžete display změnit na breakpointu:

• hidden md:flex: na mobilu skrytý, od 768 px flex kontejner. Místo md:flex může být md:block nebo md:grid, podle toho, čím má prvek být.
• md:hidden: na mobilu viditelný, od 768 px skrytý.

Prvek s display: none úplně zmizí: nezabírá žádné místo a prvky kolem něj se k sobě přisunou, jako by tam nebyl.

Skutečné menu potřebuje trochu JavaScriptu, aby po kliknutí na tlačítko odkazy zobrazilo. To se naučíte v kurzu JavaScriptu. Na naší stránce tlačítko jen drží místo, takže kliknutí na ně nic neudělá.

(Tailwind má i předpony, které fungují obráceně: max-md: použije třídu jen pod 768 px. Při postupu mobile first je budete potřebovat jen málokdy.)