Baue es selbst – Kopfzeile

Da deine Website auf verschiedenen Geräten angesehen wird, ist es an der Zeit, eine Seitennavigation zu erstellen, die sich an verschiedene Bildschirmgrößen anpasst!

Mach dich bereit, …

eine Kopfzeile für deine Website zu erstellen, die die Navigationskomponente enthält
die Navigationskomponente responsiv zu gestalten

Versuche es selbst – Baue eine neue Kopfzeilenkomponente

Erstelle eine neue Kopfzeilenkomponente. Importiere und verwende deine vorhandene Navigation.astro-Komponente innerhalb eines <nav>-Elements, das sich in einem <header>-Element befindet.
✅ Zeige mir den Code! ✅

Erstelle eine Datei namens Header.astro in src/components/
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Probiere es selbst aus – Aktualisiere deine Seiten

Ersetze auf jeder Seite deine bestehende <Navigation />-Komponente durch deine neue <Header />-Komponente.

Zeige mir den Code!

---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Startseite";
---
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Überprüfe deine Browser-Vorschau und stelle sicher, dass deine Kopfzeile auf jeder Seite angezeigt wird. Es wird noch nicht anders aussehen, aber wenn du deine Vorschau mit DevTools untersuchst, wirst du sehen, dass du nun Elemente wie <header> und <nav> rund um deine Navigationslinks hast.

Responsive Styles hinzufügen

Aktualisiere Navigation.astro mit der CSS-Klasse, um deine Navigationslinks zu steuern. Umfasse die vorhandenen Navigationslinks mit einem <div> mit der Klasse nav-links und dem ID-Attribut main-menu.
```
---
---
<div id="main-menu" class="nav-links">
  <a href="/">Startseite</a>
  <a href="/about/">Über mich</a>
  <a href="/blog/">Blog</a>
</div>
```

Kopiere die CSS-Styles unten in global.css. Diese Styles:

Stylen und positionieren die Navigationslinks für Mobilgeräte
Verwenden eine @media-Abfrage, um verschiedene Styles für größere Bildschirmgrößen zu definieren

:::tip[Mobile-First Design]Beginne damit zu definieren, was auf kleinen Bildschirmgrößen passieren soll! Kleinere Bildschirmgrößen erfordern einfachere Layouts. Passe dann deine Styles an, um größere Geräte zu berücksichtigen. Wenn du zuerst ein kompliziertes Layout entwirfst, musst du später daran feilen, um es wieder zu vereinfachen.:::

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* Navigation-Styles */
.nav-links {
  width: 100%;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d0950;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }
}

Verändere die Fenstergröße und beobachte, wie verschiedene Styles für unterschiedliche Bildschirmbreiten verwendet werden. Deine Kopfzeile ist jetzt responsiv durch die Verwendung von @media-Abfragen.

Checkliste

Ich kann CSS verwenden, um responsive Elemente auf meiner Website hinzuzufügen.

Ressourcen

Wirke mit Community Sponsor