14.3 C
Roma
mercoledì, Maggio 12, 2021
Home Corsi Creare un Menù di Navigazione in HTML

Creare un Menù di Navigazione in HTML

Quando hai a che fare con un progetto molto esteso, esso non si limiterà esclusivamente ad una o due pagine HTML giusto per intenderci, per questo è molto utile comprendere come creare un menù di navigazione.

Utilizzare del semplice ed esclusivo codice HTML non apparirebbe esteticamente al massimo proprio per questo motivo ci avvalleremo dell’utilizzo del CSS in modo da rendere tutto molto più user friendly.

Il codice CSS è stato applicato ai seguenti elementi:

  • Ul, utilizzato per aprire e chiudere una lista
  • Li, utilizzato per identificare il singolo elemento di un lista
  • Li a, identifica il link dell’elemento della lista
  • Li a:hover, identifica la proprietà quando il mouse passa sopra un elemento della lista

Quindi potremmo identificare menù di navigazione html come nient’altro che una lista non numerata alla quale applichiamo della formattazione grafica al fine di farla apparire come se fosse una barra di navitazione.

Analizziamo quindi nel dettaglio il nostro codice CSS che inseriremo all’interno del documento html fra nel tag style.

ul {
  list-style-type: none;
  padding: 0;
  overflow: auto;
  background-color: #333;
}

li {
    width: 33.3%;
    float:  left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  margin: 0 5px;
}


li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

Analizzando generalmente quello che abbiamo fatto in queste righe di codice potremmo definire che:

  • La lista identificata dal tag ul, non avrà punti di separazione tra gli elementi e il contorno di ogni elemento sarà di dimensione 0, il colore di sfondo sarà il #333 e lo sfondo sarà visibile;
  • Ogni elemento della lista occuperà il 33% dello schermo in larghezza e l’elemento sarà posizionato a sinistra;
  • Il link contenuto all’interno di ogni elemento della lista verrà visualizzato sotto forma di blocco, il testo sarà di colore bianco e sarà allineato al centro, avrà un contorno di 10 pixel e un margine dagli altri oggetti di 0px per gli elementi in alto e in basso e 10 pixel per gli elementi alla sinistra o destra;
  • Impostiamo il colore dell’oggetto per quando ottiene il focus del mouse tramite la proprietà hover
  • Creiamo una classe, active che imposta il colore background di un oggetto a #4CAF50.

La composizione del codice HTML invece è la tradizionale creazione di una lista HTML alla quale applichiamo l’ID

<ul>
  <li><a class="active" href="Homepage.php">Home</a></li>
  <li><a href="News.php">Notizie</a></li>
  <li><a href="Contact.php">Contact</a></li>
</ul>

ESERCIZIO COMPLETO

<!DOCTYPE html>
<style>

ul {
  list-style-type: none;
  padding: 0;
  overflow: auto;
  background-color: #333;
}

li {
    width: 33.3%;
    float:  left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  margin: 0 5px;
}


li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

</style>

<body>
<ul>
  <li><a class="active" href="Homepage.php">Home</a></li>
  <li><a href="News.php">Notizie</a></li>
  <li><a href="Contact.php">Contact</a></li>
</ul>

</body>


LINK UTILI

Pagina Instagram: https://www.instagram.com/developer_sumo/
I nostri corsi: https://www.developersumo.com/corsi/
Corso HTML: https://www.developersumo.com/html/
Scopri le nostre App su Google Play: https://play.google.com/store/apps/details?id=com.developersumo.app

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Cos’è e come fare un Vlog

Se siete abituati ad usare la tecnologia è abbastanza probabile che siate giovani e che passiate molto tempo sui social e se...

Come usare e creare le classi in HTML

L'attributo class è utilizzato per assegnare ad un oggetto HTML una classe. Una delle caratteristiche principali delle classi HTML è che possono...

Lista compleanni personaggi Death Note

Death Note scritto da Tsugumi Ōba e illustrato da Takeshi Obata. È stato serializzato in Giappone dal 1º dicembre 2003 al 15...

Linguaggio di Programmazione di League of Legends

Se sei un appassionato di sviluppo informatico sicuramente ti sarai chiesto quale sia il linguaggi di programmazione di League of Legends. League...

Recent Comments