Come Creare una Barra di Navigazione in HTML

In questo tutorial, imparerai come creare una barra di navigazione semplice ed efficace usando HTML e CSS. Una barra di navigazione, o navbar, è un componente cruciale di qualsiasi sito web poiché aiuta gli utenti a navigare tra le diverse sezioni del sito.

Passo 1: Crea la Struttura HTML

Per prima cosa, crea la struttura di base della barra di navigazione nel tuo file HTML. Ecco un esempio semplice:


<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Chi Siamo</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
    </ul>
</nav>

Passo 2: Stile la Barra di Navigazione con CSS

Successivamente, aggiungi un po' di CSS per stilizzare la barra di navigazione. Puoi personalizzare gli stili per adattarli al design del tuo sito web:


nav {
    background-color: #333;
    overflow: hidden;
}

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

nav ul li {
    float: left;
}

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

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

Codice Finale

Ecco il codice completo per la 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 Semplice</title>
    <style>
        nav {
            background-color: #333;
            overflow: hidden;
        }

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

        nav ul li {
            float: left;
        }

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

        nav ul li a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Chi Siamo</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
    </ul>
</nav>

</body>
</html>

Copia il Codice

Copia il codice qui sotto e usalo nel tuo progetto:


<!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 Semplice</title>
    <style>
        nav {
            background-color: #333;
            overflow: hidden;
        }

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

        nav ul li {
            float: left;
        }

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

        nav ul li a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Chi Siamo</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Contatti</a></li>
    </ul>
</nav>
<!--<p>Created with HTMLFacile</p>-->
</body>
</html>