Menu a Discesa CSS
- Pagina precedente Barra di Navigazione Orizzontale CSS
- Pagina successiva Galleria di Immagini CSS
Crea una lista a discesa a sospensione utilizzando CSS.
Dimostrazione: Caso di menu a discesa
Esempio
Muovi il puntatore del mouse sull'esempio seguente:
Menu a discesa di base
Crea una finestra a discesa che si visualizza quando l'utente mette il mouse sopra un elemento.
Esempio
<style>
.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);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Passa il mouse su di me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Esempio di spiegazione:
HTML
Apri il contenuto del menu a discesa utilizzando qualsiasi elemento, ad esempio <span> o l'elemento <button>.
Crea il contenuto del menu a discesa utilizzando un elemento contenitore (come <div>) e aggiungi qualsiasi contenuto desiderato.
Avvolgi questi elementi con l'elemento <div>, utilizzando CSS per posizionare correttamente il contenuto del menu a discesa.
CSS
.dropdown La classe position:relative，quando desideriamo posizionare il contenuto del menu a discesa direttamente sotto il pulsante di discesa (utilizzando position:absolute）è necessario utilizzare questa classe.
.dropdown-content La classe salva il contenuto effettivo del menu a discesa. Di default è nascosto e verrà visualizzato quando il mouse è sopra (vedi di seguito). Attenzione,min-width Impostato su 160px. Questa impostazione può essere modificata in qualsiasi momento. Suggerimento: Se desideri che la larghezza del contenuto scorrevole sia uguale alla larghezza del pulsante di scorrimento, imposta la larghezza su 100％ (impostazione overflow:auto Può essere implementato lo scorrimento nella schermata di piccolo formato.
Abbiamo utilizzato CSS box-shadow attributo, invece che il bordo, in modo che il menu a discesa sembri una carta.
quando l'utente posiziona il mouse sul pulsante di scorrimento::hover Il selettore viene utilizzato per visualizzare il menu a discesa.
Menu a discesa
Crea un menu a discesa e permetti all'utente di selezionare un'opzione dalla lista:
Questo esempio è simile al precedente, eccetto che abbiamo aggiunto un link nella casella a discesa e abbiamo impostato uno stile per essa per abbinarlo allo stile del pulsante di scorrimento:
Esempio
<style>
/* 设置下拉按钮的样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <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;
}
/* 显示下拉内容时，更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Contenuto del menu a discesa allineato a destra
Se desideri che il menu a discesa si apra da destra a sinistra invece che da sinistra a destra, aggiungi right: 0;:
Esempio
.dropdown-content {
right: 0;
}
Più esempi
1 - Immagine a discesa
Come aggiungere immagini e altri contenuti nel menu a discesa.
Metti il puntatore del mouse sull'immagine:
2 - Menu a discesa
Come aggiungere un menu a discesa nella barra di navigazione.
- Pagina precedente Barra di Navigazione Orizzontale CSS
- Pagina successiva Galleria di Immagini CSS
