Ausblenden und Einblenden

Der letzte Teil, der nicht auf ein Smartphone passt, ist die Navigation: Das Logo, drei Links und der Button „Spenden“ brauchen mehr Platz, als der Bildschirm eines Smartphones hat. Die meisten Websites lösen das gleich: Auf einem Smartphone blenden sie die Links aus und zeigen stattdessen einen Button Menü, der die Links zeigt, wenn man ihn antippt. Auf einem Computer siehst du die Links und nicht den Button.

Wir haben der Kopfzeile einen Button „Menü“ hinzugefügt, wie den, den du in der Lektion über Flexbox, Grid und Position mit hidden ausgeblendet hast. Es ist das button-Element neben „Spenden“, und damit beide rechts zusammenbleiben, stehen sie in einem neuen div mit den Klassen flex gap-2. Vorerst ist der Button in jeder Breite sichtbar.

Zum Ausblenden eines Elements kennst du aus der Lektion über Flexbox, Grid und Position die Klasse hidden (display: none). Mit einem Präfix kannst du display bei einem Breakpoint ändern:

• hidden md:flex: auf einem Smartphone ausgeblendet und ab 768 px ein Flex-Container. Statt md:flex kann es auch md:block oder md:grid sein, je nachdem, was das Element sein soll.
• md:hidden: auf einem Smartphone sichtbar, ab 768 px ausgeblendet.

Ein Element mit display: none verschwindet vollständig: Es nimmt keinen Platz ein, und die Elemente um es herum rücken zusammen, als wäre es nicht da.

Ein echtes Menü braucht ein bisschen JavaScript, das die Links zeigt, wenn man auf den Button klickt, und das lernst du im JavaScript-Kurs. Auf unserer Seite steht der Button nur an seinem Platz, ein Klick darauf bewirkt also nichts.

(Tailwind hat auch Präfixe, die andersherum funktionieren: max-md: wendet eine Klasse nur unterhalb von 768 px an. Mit Mobile First brauchst du sie selten.)