Scribd
Carica
6 visualizzazioni

Guida Navigation Bar HTML CSS

Caricato da

giannivbibbiena
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
6 visualizzazioni

Guida Navigation Bar HTML CSS

Caricato da

giannivbibbiena
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 3

Creare una Navigation Bar in HTML e CSS

Una navigation bar (barra di navigazione) è un componente essenziale per molti siti web. Permette agli utenti di
navigare facilmente tra le diverse pagine o sezioni del sito. In questa guida, vedremo come creare una barra di
navigazione utilizzando HTML per la struttura e CSS per lo stile, con spiegazioni dettagliate su ogni passaggio.

1. Struttura in HTML
Per creare la struttura della barra di navigazione, iniziamo con il codice HTML di base. Di seguito è riportato un
esempio di come dovrebbe apparire il codice HTML per una semplice barra di navigazione.

<!DOCTYPE html>

<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barra di Navigazione</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi Siamo</a></li>
<li><a href="#services">Servizi</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
</body>
</html>

Spiegazione del codice HTML:


- <nav>: rappresenta il contenitore principale della barra di navigazione. Tutto il contenuto della barra di
navigazione sarà inserito al suo interno.

- <ul>: una lista non ordinata che raccoglie tutti gli elementi della barra di navigazione. Viene utilizzata perché è
strutturata per contenere una serie di elementi (come link).

- <li>: ogni voce della lista rappresenta un elemento della barra, ossia una sezione del sito web a cui si vuole dare
accesso. Qui si utilizzano i link.

- <a href="#”>:è un tag di ancoraggio che contiene l'URL della sezione a cui si collega. I link possono puntare a
sezioni della stessa pagina o a pagine diverse.
2. Stile in CSS
Ora, aggiungiamo lo stile nel file CSS per dare una forma e uno stile alla barra di navigazione. Nel file CSS,
imposteremo colori, allineamenti, padding e altri aspetti visivi.

/* stile.css */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

nav {
background-color: #333;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

nav ul li {
float: left;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

nav ul li a:hover {
background-color: #555;
}

Spiegazione del codice CSS:


- background-color : applica un colore di sfondo alla barra di navigazione. In questo caso, è impostato su un grigio
scuro (#333) per creare contrasto con il testo bianco.

- list-style-type: none; rimuove i punti davanti a ogni voce della lista per renderla più simile a una barra di
navigazione.
- float: left; dispone ogni voce della lista orizzontalmente allineata a sinistra, così che gli elementi appaiano
affiancati invece che uno sotto l'altro.
- padding : aggiunge spazio intorno al testo di ogni link per migliorare la visibilità e la facilità di clic.

- hover: aggiunge un effetto visivo quando il puntatore passa sopra un link, per migliorare l'esperienza utente.

3. Conclusione
Abbiamo creato una semplice barra di navigazione in HTML e CSS. Con ulteriori miglioramenti, come l'uso di media
query, puoi rendere questa barra di navigazione responsive per dispositivi mobili. Ad esempio, si potrebbe
aggiungere un menu a tendina o modificare lo stile per schermi più piccoli.

Potrebbero piacerti anche