Crearea unui meniu derulant hoverable cu CSS.
Demo: Exemple Dropdown
Mutați mouse-ul peste exemplele de mai jos:
Dropdown de bază
Creați o casetă drop-down care apare atunci când utilizatorul deplasează mouse-ul peste un element.
Exemplu
<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> Mouse over me </span>
<div class="dropdown-content">
<p> Hello World! </p>
</div>
</div> Încearcă - l singur » exemplu explicat
HTML) Utilizați orice element pentru a deschide conținutul drop - down, de exemplu , un <span> , sau <button> Element.
Folosiți un element container (like <div> ) pentru a crea conținut vertical și adăugați orice doriți în interiorul acesteia.
Înfășurați un <div> elementul în jurul elementelor pentru a poziționa conținutul vertical corect cu CSS.
CSS) Cu .dropdown clasa de utilizare position:relative , care este necesară atunci când vrem conținutul drop - down pentru a fi plasate imediat sub butonul drop - down (using position:absolute ) .
.dropdown-content de .dropdown-content clasa deține conținutul real drop - down. Acesta este ascuns în mod implicit, și va fi afișat pe Hover (see below) a se (see below) . Observați min-width este setat la 160px. Simțiți-vă liber pentru a schimba acest lucru. Sfat: Dacă doriți lățimea conținutului drop - down pentru a fi la fel de mare ca butonul derulant, setați width până la 100% (și overflow:auto pentru a activa defilare pe ecrane mici).
În loc de a folosi o frontieră, am utilizat CSS3 box-shadow proprietatea pentru a face din meniul drop - down arata ca o "card" .
:hover Selectorul este folosit pentru a afișa meniul drop - down când utilizatorul deplasează mouse - ul peste butonul drop - down.
meniul drop-down
Creați un meniu drop-down, care permite utilizatorului să aleagă o opțiune dintr-o listă:
Acest exemplu este similar cu cel anterior, cu excepția faptului că vom adăuga linkurile din lista de valori și le-stil pentru a se potrivi cu un buton drop-down stil:
Exemplu
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.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> Încearcă - l singur » -Aliniat dreapta Conținut Dropdown
Dacă doriți meniul drop - down pentru a merge de la dreapta la stânga, în loc de la stânga la dreapta, se adaugă right: 0;
Mai multe exemple
Imagine dropdown
Acest exemplu demonstrează modul în care să adăugați o imagine și alt conținut în interiorul casetei drop-down.
dropdown Navbar
Acest exemplu demonstrează modul în care să adăugați un meniu vertical în interiorul unei bare de navigare.