Salta ai contenuti

Costruiscilo tu stesso - Header

Dato che il tuo sito sarà visualizzato su diversi dispositivi, è il momento di creare una navigazione di pagina che possa rispondere a più dimensioni dello schermo!

Preparati a…

  • Crea un Header per il tuo sito che contenga il componente Navigation
  • Rendi il componente Navigation responsive

Prova tu stesso - Costruisci un nuovo componente Header

Sezione intitolata Prova tu stesso - Costruisci un nuovo componente Header
  1. Crea un nuovo componente Header. Importa e usa il tuo componente Navigation.astro esistente all’interno di un elemento <nav> che si trova all’interno di un elemento <header>.

    Mostrami il codice!

    Crea un file chiamato Header.astro in src/components/

    src/components/Header.astro
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
    <nav>
    <Navigation />
    </nav>
    </header>

Prova tu stesso - Aggiorna le tue pagine

Sezione intitolata Prova tu stesso - Aggiorna le tue pagine
  1. Su ogni pagina, sostituisci il tuo componente <Navigation/> esistente con il tuo nuovo header.

    Mostrami il codice!
    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 = "Pagina iniziale";
    ---
    <html lang="it">
    <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. Controlla l’anteprima del tuo browser e verifica che il tuo header sia visualizzato su ogni pagina. Non apparirà ancora diverso, ma se ispezioni la tua anteprima usando gli strumenti per sviluppatori, vedrai che ora hai elementi come <header> e <nav> attorno ai tuoi link di navigazione.

  1. Aggiorna Navigation.astro con la classe CSS per controllare i tuoi link di navigazione. Avvolgi i link di navigazione esistenti in un <div> con la classe nav-links.

    src/components/Navigation.astro
    ---
    ---
    <div class="nav-links">
    <a href="/">Home</a>
    <a href="/about">Su di me</a>
    <a href="/blog">Blog</a>
    </div>
  2. Copia gli stili CSS qui sotto in global.css. Questi stili:

    • Stilizzano e posizionano i link di navigazione per mobile
    • Includono una classe expanded che può essere attivata/disattivata per visualizzare o nascondere i link su mobile
    • Usano una media query @media per definire stili diversi per dimensioni dello schermo più grandi
    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;
    }
    /* stili nav */
    .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;
    }
    }

Ridimensiona la tua finestra e cerca stili diversi applicati a diverse larghezze dello schermo. Il tuo header è ora responsive alla dimensione dello schermo attraverso l’uso di media query @media.

Contribuisci Comunità Sponsor