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

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/
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Prova tu stesso - Aggiorna le tue pagine

Su ogni pagina, sostituisci il tuo componente <Navigation/> esistente con il tuo nuovo header.

Mostrami il codice!

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

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.

Aggiungi stili responsive

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.
```
---
---
<div class="nav-links">
  <a href="/">Home</a>
  <a href="/about">Su di me</a>
  <a href="/blog">Blog</a>
</div>
```

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

:::tip[Design mobile-first]Inizia definendo cosa dovrebbe succedere su dimensioni dello schermo piccole per prime! Le dimensioni dello schermo più piccole richiedono layout più semplici. Poi, adatta i tuoi stili per adattarsi a dispositivi più grandi. Se progetti prima il caso complicato, allora devi lavorare per cercare di renderlo di nuovo semplice.:::

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.

Checklist

Posso usare CSS per aggiungere elementi responsive al mio sito.

Risorse

Contribuisci Comunità Sponsor