Créez-le par vous-même - En-tête
Étant donné que votre site sera consulté sur différents appareils, il est temps de créer une navigation de page capable de répondre à plusieurs tailles d’écran !
Préparez-vous à…
- Créer un en-tête pour votre site contenant le composant Navigation
- Rendre le composant de navigation réactif
Essayer par vous-même - Créer un nouveau composant Header
Titre de la section Essayer par vous-même - Créer 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
danssrc/components/
src/components/Header.astro ---import Navigation from './Navigation.astro';---<header><nav><Navigation /></nav></header>
Essayer par vous-même - Mettre à jour vos pages
Titre de la section Essayer par vous-même - Mettre à jour vos pages-
Sur chaque page, remplacez votre composant
<Navigation/>
existant par votre nouvel en-tête.Montrez-moi le code !
src/pages/index.astro ---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> -
Consultez l’aperçu de votre 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.
Ajouter des styles réactifs
Titre de la section Ajouter des styles réactifs-
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 classenav-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 :- Mettent en forme 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
Commencez par définir ce qui doit se passer sur les petits écrans en premier ! Les écrans plus petits nécessitent des mises en page plus simples. Ensuite, ajustez vos styles pour les appareils plus grands. Si vous concevez d’abord le cas compliqué, vous devrez ensuite essayer de le rendre à nouveau simple.
src/styles/global.css 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 réactif à la taille de l’écran grâce à l’utilisation des requêtes @media
.
Liste de contrôle
Titre de la section Liste de contrôleRessources
Titre de la section Ressources-
Conception basée sur les composants (Anglais) external
-
Balises HTML sémantiques (Anglais) external
-
Conception mobile-first (Anglais) external