Come creare: pulsante di menu a destra
- Pagina precedente Link di navigazione inferiore con bordo
- Pagina successiva Link menu centrato
Impara a creare una barra di navigazione con link allineati a sinistra e destra.
Crea la barra di navigazione superiore
Primo passo - Aggiungi HTML:
<div class="topnav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="topnav-right"> <a href="#search">Search</a> <a href="#about">About</a> </div> </div>
Secondo passo - Aggiungi CSS:
/* Aggiungi sfondo nero alla navigazione superiore */ .topnav { background-color: #333; overflow: hidden; } /* Imposta lo stile dei link nella barra di navigazione */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Cambia il colore del link quando il mouse è sopra di esso */ .topnav a:hover { background-color: #ddd; color: black; } /* Aggiungi colore al link attivo/attuale */ .topnav a.active { background-color: #04AA6D; color: white; } /* Parte a destra della navigazione superiore */ .topnav-right { float: right; }
Pagina relativa
Tutorial:Come creare una barra di navigazione superiore responsive
Tutorial:Barra di navigazione CSS
- Pagina precedente Link di navigazione inferiore con bordo
- Pagina successiva Link menu centrato