3.60
Creazione di Menu Verticale con Liste Non Ordinate in HTML e CSS:
Le liste, oltre a essere utilizzate per elencare una serie di elementi nel testo, sono fondamentali per la creazione di menu, sia principali che secondari, all’interno delle pagine web. In questa lezione, esploreremo come realizzare un menu verticale utilizzando le liste non ordinate.
Codice HTML: Il codice HTML è semplice e strutturato come una lista non ordinata:
html
<ul id="menu"> <li><a href="#">Home</a></li> <li class="active"><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> Codice CSS: Il CSS personalizza gli elementi della lista, eliminando margini, padding e marcatori:
css
ul#menu { font-family: Verdana, sans-serif; font-size: 12px; margin: 0; padding: 0; list-style: none;
} ul#menu li { background-color: #FF831C; border-left: 5px solid #54BAE2; display: block; width: 150px; height: 30px; margin: 2px 0;
} ul#menu li a { color: #fff; display: block; font-weight: bold; line-height: 30px; padding-left: 15px; text-decoration: none; width: 135px; /* 150px - 15px (padding) */ height: 30px;
} ul#menu li.active, ul#menu li:hover { background-color: #54BAE2; border-left: 5px solid #FF831C;
} Questa combinazione di HTML e CSS crea un menu verticale elegante. Gli stili includono colori di sfondo, bordi, e dimensioni personalizzate per i link e gli elementi della lista. Il menu risulta completo con un effetto di cambio colore al passaggio del mouse o quando la voce è attiva.