Come creare: barra laterale fisso
- Pagina precedente Barra di ricerca
- Pagina successiva Navigazione laterale
Impara come creare un menu di navigazione laterale fisso utilizzando CSS.
Altezza totale:
Altezza automatica:
Crea una barra laterale fissa
Primo passo - Aggiungi HTML:
/* Navigazione laterale */ <div class="sidenav"> <a href="#">Informazioni</a> <a href="#">Servizi</a> <a href="#">Clienti</a> <a href="#">Contatto</a> </div> /* Contenuto della pagina */ <div class="main"> ... </div>
Secondo passo - Aggiungi CSS:
/* Menu della barra laterale */ .sidenav { height: 100%; /* Altezza totale schermo: se desideri altezza automatica, elimina questa impostazione */ width: 160px; /* Imposta la larghezza della barra laterale */ position: fixed; /* Barra laterale fissa (rimane in posizione quando si scorre) */ z-index: 1; /* Mantieni sempre in alto */ top: 0; /* Mantieni sempre in alto */ left: 0; background-color: #111; /* Nero */ overflow-x: hidden; /* Disabilita la scorrimento orizzontale */ padding-top: 20px; } /* Link del menu di navigazione */ .sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; } /* Cambia il colore quando il mouse è sopra il link di navigazione */ .sidenav a:hover { color: #f1f1f1; } /* Imposta lo stile del contenuto della pagina */ .main { margin-left: 160px; /* Uguale alla larghezza della barra laterale */ padding: 0px 10px; } /* Sull'ecrani con altezza inferiore a 450 pixel, cambia lo stile della barra laterale (meno margine interno e dimensione del font più piccola) */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }
Pagine correlate
Tutorial:Barra di navigazione CSS
- Pagina precedente Barra di ricerca
- Pagina successiva Navigazione laterale