CSS menu a discesa
Utilizzare i CSS per creare display dopo un mouse mossa sull'effetto menu a discesa.
Esempi del menu a discesa
Esempi Demo 1
Questo tutorial
www.w3big.com
Esempi Demo 2
Esempi Demo 3
menu a base discesa
Quando il mouse viene spostato gli elementi specificati, sarà discesa viene visualizzato il menu.
Esempi
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-contenuti {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 16px 0px 8px rgba (0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown: hover-contenuti .dropdown {
display: block;
}
</ Style>
<Div class = "discesa">
<Span> Mouse su di me </ span>
<Div class = "discesa-content ">
<P> Ciao a tutti! </ P>
</ Div>
</ Div>
Prova »
Esempi di analitica
HTML parte:
Siamo in grado di utilizzare una qualsiasi delle HTM, gli elementi per aprire il menu a discesa, come ad esempio: <span>, o <tasto> elemento.
Utilizzare elemento contenitore (ad esempio: <div>) per creare un menu a discesa e posizionato ovunque si desidera mettere su.
Utilizzare <div> elemento per avvolgere questi elementi, e usare i CSS per impostare il contenuto dello stile discesa.
parte CSS:
.dropdown classe utilizza position:relative , che consentirà di definire il contenuto menu a discesa si trova nel pulsante a discesa (utilizzando position:absolute ) in posizione d'angolo in basso a destra.
.dropdown-content di classe è il menu attuale discesa. È nascosta per impostazione predefinita, verrà visualizzato il mouse viene spostato all'elemento specificato dopo. Si noti che min-width valore è impostato su 160px. È liberamente possibile modificarlo. Nota: Se si desidera impostare la discesa e discesa pulsante di contenuti a banda larga coerente, impostare la width di 100% ( overflow:auto impostazione può scorrere le piccole dimensioni dello schermo).
Usiamo il box-shadow proprietà consente il menu a discesa che si presenta come una "carta".
:hover selettore per menu a discesa utente viene visualizzato quando il mouse viene spostato il pulsante a discesa.
Menu a discesa
Creare un menu a discesa, e permette all'utente di selezionare una voce nella lista:
Gli esempi precedenti di casi simili, quando si aggiunge un collegamento nel menu a discesa, e impostare lo stile:
Esempi
/ * Style pulsante a discesa * /
.dropbtn {
background-color: # 4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/ * Contenitore <div> - è necessario individuare i contenuti discesa * /
.dropdown {
position: relative;
display: inline-block;
}
/ * Contenuti Pulldown (nascosta per impostazione predefinita) * /
.dropdown-contenuti {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 16px 0px 8px rgba (0,0,0,0.2);
}
/ * Menu di collegamento discesa * /
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Dopo il menu a discesa colore Modifica collegamento hover * /
.dropdown-content a: hover {background -color: # f1f1f1}
/ * Dopo la discesa Mostra menu a hover * /
.dropdown: hover-contenuti .dropdown {
display: block;
}
/ * Quando il contenuto del menu a discesa dopo il pulsante a discesa consente di visualizzare il colore di sfondo modificato * /
.dropdown: hover {.dropbtn
background-color: # 3e8e41;
}
</ Style>
<Div class = "discesa">
<Pulsante class = "dropbtn"> menu a discesa </ button>
<Div class = "discesa-content ">
<A Href = "#"> Questo tutorial 1 </ a>
<A Href = "#"> Questo tutorial 2 </ a>
<A Href = "#"> Questo tutorial 3 </ a>
</ Div>
</ Div>
Prova »
contenuti discesa Allineamento
float: left;
float: right;
Se si desidera impostare menu a discesa contenuto giusto galleggiante è da destra a sinistra anziché da sinistra a destra, è possibile aggiungere il seguente codice right: 0;
Altri esempi
Immagine a discesa
Questo esempio dimostra come aggiungere un quadro di come il menu a tendina.
Scendete navigazione
Questo esempio dimostra come aggiungere un menu a discesa sulla barra di navigazione.