Aller au contenu

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

Titre de la section Essayez par vous-même - Construisez un nouveau composant Header
  1. 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

Titre de la section Essayez par vous-même - Mettez à jour vos pages
  1. 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>
  2. 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.

  1. 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>
  2. 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
    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 responsive en fonction de la taille de l’écran grâce à l’utilisation de requêtes @media.

Contribute

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Community