In diesem Beitrag erstellen Sie eine responsive Navigation, die immer funktioniert: Ohne JavaScript sehen die Besucher eine vertikale Navigationsliste, mit JavaScript gibt es einen Menübutton, der die Navigation bei Berührung sanft einblendet. In breiten Viewports bekommen die Besucher eine horizontale Navigation.
Sie sehen alle Beiträge zum Thema
CSS-Layout
Beiträge zum Layouten per CSS, z. B. zu Media Queries, responsiven Webseiten, position, float, Flexbox und Grid.
- Bücher (29)
- CSS-Grundlagen (18)
- CSS-Layout (10)
- HTML (16)
- HTML + CSS (22)
- Social Media (5)
- Sonstiges (9)
- Tools (23)
- Videokurse (23)
- WordPress (39)
Sticky CSS Grid Items
Melanie Richards erklärt, wie man position: sticky
innerhalb eines Grid-Layouts einsetzen kann.
CSS-Tricks – A Complete Guide to Grid
Eines der besten Nachschlagewerke zum »CSS Grid Layout« ist der »Complete Guide« von CSS-Tricks.com.
CSS-Tricks – A Complete Guide to Flexbox
Eines der besten Nachschlagewerke zum »Flexible Box Layout« ist der »Complete Guide« von CSS-Tricks.com.
Beschreibungslisten gestalten per Grid
Beschreibungslisten, die auch unter ihrem alten Namen Definitionslisten bekannt sind, kann man mit ein paar einfachen CSS-Grid-Anweisungen sehr einfach layouten.
Responsive CSS-Layouts? Ohne float? Echt?
Mehrspaltige Layouts wurden in CSS lange Zeit quasi in Notwehr mit Eigenschaften wie float
oder position
umgesetzt. Das war zwar besser als die HTML-Tabellen der 90er-Jahren, aber alles andere als einfach. Inzwischen geht das viel einfacher.
CSS-Grid: auto-fill und auto-fit
Die immer lesenswerte Sarah Soueidan erklärt, wie man mit Grid responsive Layouts ohne Media Queries erstellen kann.
Tool: Der CSS Grid Generator
Sarah Drasner hat mit dem CSS Grid Generator ein ziemlich geniales Tool erstellt. Kurz das Video anschauen und dann einfach mal ausprobieren.
Webtechniken lernen 3: CSS-Layout (2019)
Es gibt einen neuen Videokurs von mir. Zum Layouten per CSS.
CSS-Layouts: Flexbox oder Grid?
Auf css-tricks.com erklärt Chris Coyier den Unterschied zwischen Flexbox und Grid, unter anderem anhand von zahlreichen Tweets zum Thema.