CSS - Menu a discesa: Una guida per principianti
Ciao هناك, futuri web designer! Oggi, ci immergeremo nel meraviglioso mondo dei menu a discesa CSS. Come il tuo amico insegnante di informatica del vicinato, sono entusiasta di guidarti in questo viaggio. Non preoccuparti se non hai mai scritto una riga di codice prima - inizieremo dalle basi e ci muoveremo verso l'alto. Allora, prenditi una tazza di caffè (o tè, se è più tuo stile) e iniziamo!
Cos'è un menu a discesa CSS?
Prima di immergerci nel codice, capiremo cos'è un menu a discesa. Immagina di essere in un ristorante elegante, e il cameriere ti consegna un menù. Ma questo non è qualsiasi menù - è un menù magico! Quando tocchi "Antipasti", una lista di deliziosi stuzzichini appare. Questo è esattamente ciò che fa un menu a discesa su un sito web. È un menù che, quando interagisci con esso, rivela altre opzioni.
Ora, vediamo come possiamo creare questa magia con CSS!
Menu a discesa CSS - Esempio di base
Iniziamo con un semplice menu a discesa. Ecco il codice HTML e CSS:
<div class="dropdown">
<button class="dropbtn">Menu a discesa</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}Dividiamo questo:
- Creiamo un contenitore (
<div class="dropdown">) per il nostro menu a discesa. - Dentro, abbiamo un pulsante (
<button class="dropbtn">) che attiverà il menu a discesa. - Il contenuto effettivo del menu a discesa è in un altro div (
<div class="dropdown-content">). - Usiamo CSS per nascondere il contenuto del menu a discesa per impostazione predefinita (
display: none;). - Quando passiamo il mouse sul contenitore del menu a discesa, mostriamo il contenuto (
display: block;).
Effetto di passaggio del mouse sul menu a discesa
Ora che abbiamo il nostro menu a discesa di base, rendiamolo un po' più elegante con un effetto di passaggio del mouse:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}Questo CSS cambierà il colore del pulsante quando passi il mouse su di esso. È come se il pulsante dicesse, "Ehi, sono pronto a mostrarti più opzioni!"
Menu a discesa attivato con il clic
A volte, vogliamo che il menu a discesa appaia quando viene cliccato, non solo quando si passa il mouse. Ecco come possiamo farlo con un po' di JavaScript:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu a discesa</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.show {display:block;}Questo script alterna la classe 'show' quando si clicca sul pulsante e chiude il menu a discesa se si clicca ovunque else nella pagina.
Menu a discesa allineato a destra
Cosa succede se vogliamo che il nostro menu a discesa si allinei a destra invece che a sinistra? Facile facile!
.dropdown-content {
right: 0;
}Aggiungi questo al tuo CSS esistente. È come dire al tuo menu a discesa, "Spostati sulla destra, per favore!"
Menu a discesa allineato a sinistra
Per completezza, ecco come allineare esplicitamente il tuo menù a sinistra (sebbene questo siausually il predefinito):
.dropdown-content {
left: 0;
}Menu a discesa con immagine
Rendiamo il nostro menu a discesa ancora più emozionante aggiungendo un'immagine:
<div class="dropdown">
<button class="dropbtn">Menu a discesa</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>.dropdown-content img {
margin: 10px 0;
}Ora il tuo menu a discesa ha una bellissima immagine in alto. È come aggiungere una ciliegina sulla torta del tuo CSS!
Menu a discesa con barra di navigazione
Infine, vediamo come possiamo integrare il nostro menu a discesa in una barra di navigazione:
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Notizie</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Menu a discesa</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.navbar .dropdown {
display: inline-block;
}Ecco! Un menu a discesa completamente funzionale integrato in una barra di navigazione.
Conclusione
Complimenti! Hai appena imparato a creare diversi tipi di menu a discesa CSS. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi esempi. Cambia i colori, aggiungi animazioni, o persino prova a combinare diversi tipi di menu a discesa in una pagina.
Ecco una tabella di riepilogo dei metodi che abbiamo coperto:
| Metodo | Descrizione |
|---|---|
| Menu a discesa di base | Menu a discesa che appare al passaggio del mouse |
| Effetto di passaggio del mouse | Menu a discesa con cambiamento di colore al passaggio del mouse |
| Menu a discesa attivato con il clic | Menu a discesa che appare quando viene cliccato |
| Menu a discesa allineato a destra | Menu a discesa che si allinea a destra |
| Menu a discesa allineato a sinistra | Menu a discesa che si allinea a sinistra (predefinito) |
| Menu a discesa con immagine | Menu a discesa che include un'immagine |
| Menu a discesa con barra di navigazione | Menu a discesa integrato in una barra di navigazione |
Ricorda, nel mondo del design web, la creatività è il tuo miglior amico. Quindi vai avanti e crea menu a discesa straordinari! Chi lo sa, forse inventerai la prossima grande cosa nella navigazione web. Buon coding!
Credits: Image by storyset