Construisez-le vous-même - En-tête

Étant donné que votre site sera consulté sur différents appareils, créons une navigation de page qui puisse répondre à plusieurs tailles d’écran !

Préparez-vous à…

Créez un en-tête pour votre site contenant le composant Navigation
Rendez le composant Navigation responsive

Essayez par vous-même - Construisez un nouveau composant Header

Créez un nouveau composant Header. Importez et utilisez votre composant Navigation.astro existant à l’intérieur d’un élément <nav> qui se trouve à l’intérieur d’un élément <header>.
Montrez-moi le code !
Créez un fichier nommé Header.astro dans src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Essayez par vous-même - Mettez à jour vos pages

Sur chaque page, remplacez votre composant <Navigation/> existant par votre nouvel en-tête.

Montrez-moi le 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 = "Page d'accueil";
---
<html lang="fr">
  <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>

Vérifiez votre aperçu de navigateur et vérifiez que votre en-tête est affiché sur chaque page. Il ne sera pas encore différent, mais si vous inspectez votre aperçu à l’aide des outils de développement, vous verrez maintenant des éléments tels que <header> et <nav> autour de vos liens de navigation.

Ajoutez des styles responsives

Mettez à jour Navigation.astro avec la classe CSS pour contrôler vos liens de navigation. Enveloppez les liens de navigation existants dans une balise <div> avec la classe nav-links.
src/components/Navigation.astro
```
---
---
<div class="nav-links">
  <a href="/">Accueil</a>
  <a href="/about">À propos</a>
  <a href="/blog">Blog</a>
</div>
```

Copiez les styles CSS ci-dessous dans global.css. Ces styles :

Stylisent et positionnent les liens de navigation pour les appareils mobiles
Incluent une classe expanded qui peut être activée ou désactivée pour afficher ou masquer les liens sur mobile
Utilisent une requête @media pour définir des styles différents pour des tailles d’écran plus grandes

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;
}

/* Styles de la navigation */

.nav-links {
  width: 100%;
  top: 5rem;
  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;
}

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

.expanded {
  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;
  }

}

Redimensionnez votre fenêtre et recherchez les styles différents appliqués à différentes largeurs d’écran. Votre en-tête est maintenant responsive en fonction de la taille de l’écran grâce à l’utilisation de requêtes @media.

Liste de contrôle

Je peux utiliser CSS pour ajouter des éléments responsifs à mon site.

Ressources

Conception basée sur les composants external
Balises HTML sémantiques external
Conception mobile-first external

Contribuer

Communauté