- Home
- Blog
- Web Design
- Come creare un menu a tendina con HTML e CSS
Come creare un menu a tendina con HTML e CSS
Getting your Trinity Audio player ready... |
Un menu a tendina è una componente fondamentale per migliorare la navigazione di un sito web, consentendo di organizzare voci e sottovoci in modo ordinato e accessibile. In questa guida, imparerai come creare un menu a tendina utilizzando esclusivamente HTML e CSS, senza l’utilizzo di JavaScript.
Struttura base del menu
Iniziamo creando la struttura HTML del menu. Useremo un elemento <nav> per contenere il menu e una lista non ordinata (<ul>) per organizzare le voci principali e le sottovoci.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Guida per creare un menu a tendina con HTML e CSS senza JavaScript">
<meta name="keywords" content="menu a tendina, HTML, CSS, tutorial, web design">
<meta name="author" content="Gianluca Scoponi">
<title>Menu a Tendina con HTML e CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Servizi</a>
<ul class="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>
</body>
</html>Stile del menu con CSS
Il passo successivo è aggiungere stile al menu per renderlo funzionale e visivamente accattivante.
/* Resetta i margini e i padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
nav {
background-color: #333;
padding: 10px;
}
.menu {
list-style: none;
display: flex;
}
.menu > li {
position: relative;
margin-right: 20px;
}
.menu a {
text-decoration: none;
color: white;
padding: 10px 15px;
display: block;
}
.menu a:hover {
background-color: #555;
}
.submenu {
list-style: none;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
display: none;
min-width: 150px;
}
.submenu li {
border-bottom: 1px solid #444;
}
.submenu li:last-child {
border-bottom: none;
}
.submenu a {
padding: 10px;
}
.menu li:hover > .submenu {
display: block;
}
Come funziona il menu
- HTML: La lista
<ul>principale contiene le voci del menu, mentre le sottovoci sono organizzate in una lista<ul>nidificata. - CSS: La proprietà
position: absolutepermette al sottomenu di essere posizionato al di sotto della voce principale. La visibilità del sottomenu è controllata condisplay: noneedisplay: blockal passaggio del mouse grazie al selettore:hover.
Conclusione
Seguendo questa guida, hai creato un menu a tendina completamente funzionante utilizzando solo HTML e CSS. Questo approccio è leggero, veloce e ideale per progetti che non richiedono funzionalità avanzate offerte da JavaScript. Personalizza il design e le voci del menu per adattarlo alle esigenze del tuo sito web, contattaci per personalizzare il tuo sito.
