Bootstrap - Dropdown Demo
Cos'è una Dropdown?
Ciao a tutti, futuri sviluppatori web! Oggi ci immergeremo nel meraviglioso mondo delle dropdown di Bootstrap. Come il tuo amico insegnante di informatica del quartiere, sono entusiasta di guidarti in questo viaggio, anche se non hai mai scritto una riga di codice prima. Credimi, alla fine di questo tutorial, sarai in grado di creare dropdown come un professionista!
Una dropdown è un elemento dell'interfaccia utente che permette agli utenti di selezionare un'opzione da un elenco di elementi. È come un menu digitale che appare quando clicchi su un pulsante o un link. Immagina di essere in un ristorante, e invece di un menù cartaceo, il cameriere ti consegna un bottone magico. Quando premi il bottone, un elenco di piatti deliziosi appare fluttuando nell'aria. Questo è essenzialmente ciò che fa una dropdown su una pagina web!
Perché Usare le Dropdown?
Le dropdown sono estremamente utili per:
- Risparmiare spazio sulla tua pagina web
- Organizzare opzioni correlate
- Fornire un'interfaccia utente pulita e intuitiva
Ora, mettiamo le mani sporche con un po' di codice!
Configurazione di Bootstrap
Prima di creare la nostra prima dropdown, dobbiamo configurare Bootstrap nel nostro file HTML. Non preoccuparti; è più facile che configurare un nuovo smartphone!
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Il tuo contenuto andrà qui -->
<!-- Bootstrap JS e Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Questo codice configura una struttura HTML di base e include i file necessari di Bootstrap. Pensalo come preparare la tua cucina prima di iniziare a cucinare!
Creazione di una Dropdown di Base
Iniziamo con una semplice dropdown. Creeremo un pulsante che, quando viene cliccato, rivela un elenco di opzioni.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Scegli un frutto
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Mela</a></li>
<li><a class="dropdown-item" href="#">Banana</a></li>
<li><a class="dropdown-item" href="#">Ciliegia</a></li>
</ul>
</div>Ecco una spiegazione dettagliata:
-
<div class="dropdown">: Questo è il contenitore per la nostra dropdown. -
<button class="btn btn-primary dropdown-toggle" ...>: Questo crea il pulsante che gli utenti cliccano per aprire la dropdown. -
data-bs-toggle="dropdown": Questo dice a Bootstrap che questo pulsante dovrebbe attivare una dropdown. -
<ul class="dropdown-menu">: Questo è l'elenco che appare quando si clicca sul pulsante. -
<li><a class="dropdown-item" href="#">...: Questi sono gli elementi individuali nella lista della dropdown.
Direzioni della Dropdown
Proprio come puoi servire cibo da diverse direzioni in un buffet, Bootstrap ti permette di cambiare la direzione della tua dropdown. Esploriamo alcune opzioni:
Dropup
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Un'altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
</ul>
</div>L'unica differenza qui è la classe dropup invece di dropdown. È come capovolgere il tuo menu all'inverso!
Dropright e Dropleft
<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Un'altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
</ul>
</div>
<div class="dropstart">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Un'altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
</ul>
</div>Usa dropend per dropdown allineati a destra e dropstart per dropdown allineati a sinistra. È come scegliere da quale parte del piatto mettere la tua forchetta!
Elementi del Menu Dropdown
Ora, arricchiamo il nostro menu dropdown con alcune funzionalità aggiuntive:
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">Intestazione del menu</h6></li>
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Un'altra azione</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Azione disabilitata</a></li>
</ul>
</div>In questo esempio, abbiamo aggiunto:
- Un'intestazione (
dropdown-header) - Un divisore (
dropdown-divider) - Un elemento disabilitato (
dropdown-item disabled)
È come creare sezioni nel tuo menu e grigioare gli elementi che sono esauriti!
Dimensioni della Dropdown
Proprio come puoi ordinare una bevanda piccola, media o grande, puoi cambiare la dimensione del tuo pulsante dropdown:
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Pulsante grande
</button>
<ul class="dropdown-menu">
<!-- Elementi del menu dropdown -->
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Pulsante piccolo
</button>
<ul class="dropdown-menu">
<!-- Elementi del menu dropdown -->
</ul>
</div>Usa btn-lg per un pulsante grande e btn-sm per un pulsante piccolo. È così semplice!
Metodi della Dropdown
Bootstrap fornisce diversi metodi per controllare le dropdown programmaticamente. Ecco una tabella di questi metodi:
| Metodo | Descrizione |
|---|---|
| show | Mostra la dropdown |
| hide | Nasconde la dropdown |
| toggle | Commuta la dropdown |
| update | Aggiorna la posizione di una dropdown di un elemento |
| dispose | Distrugge la dropdown di un elemento |
Per utilizzare questi metodi, puoi usare JavaScript. Ad esempio:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
// Mostra dropdown
dropdownList[0].show()
// Nasconde dropdown
dropdownList[0].hide()
// Commuta dropdown
dropdownList[0].toggle()Ecco fatto! Hai appena completato un corso intensivo sulle dropdown di Bootstrap. Ricorda, la pratica fa la perfezione, quindi non aver paura di sperimentare questi elementi sui tuoi siti web.
Prima di sapere, sarai in grado di creare menu dropdown che farebbero invidia anche al ristorante più elegante. Buon codice, e che le tue dropdown cadano sempre nella giusta direzione!
Credits: Image by storyset