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-
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
insrc/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-
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> -
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
Sezione intitolata 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 classenav-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> -
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
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.
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
.
Checklist
Sezione intitolata ChecklistRisorse
Sezione intitolata Risorse-
Design basato su componenti external
-
Tag HTML semantici external
-
Design mobile-first external