Hoe OM - Beweegbare aftreklys
Leer hoe om 'n sweefbare aftreklys met CSS te skep.
Aftreklys
'n Aftrekkieslys is 'n wisselbare kieslys wat die gebruiker toelaat om een waarde uit 'n voorafbepaalde lys te kies:
Skep 'n sweefbare aftreklys
Skep 'n aftreklys wat verskyn wanneer die gebruiker die muis oor 'n element beweeg.
Stap 1) Voeg HTML by:
Voorbeeld
<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>
Voorbeeld Verduidelik
Gebruik enige element om die aftreklys oop te maak, bv. 'n <knoppie>, <a> of <p> element.
Gebruik 'n houerelement (soos <div>) om die aftreklys te skep en voeg die aftrekskakels daarin by.
Draai 'n <div>-element om die knoppie en die <div> om die aftrekkieslys korrek met CSS te plaas.
Stap 2) Voeg CSS by:
Voorbeeld
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 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: #ddd;}
/* 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;}
Voorbeeld Verduidelik
Ons het die aftrekknoppie gestileer met 'n agtergrondkleur, opvulling, ens.
Die .dropdown
klas gebruik position:relative
, wat nodig is wanneer ons wil hê dat die dropdown-inhoud reg onder die dropdown-knoppie geplaas moet word (met position:absolute
).
Die .dropdown-content
klas hou die werklike aftreklys. Dit is by verstek versteek en sal vertoon word wanneer jy beweeg (sien hieronder). Let daarop min-width
dat dit op 160px gestel is. Verander dit gerus. Wenk: As jy wil hê dat die breedte van die aftrek-inhoud so wyd soos die aftrekknoppie moet wees, stel die width
op 100% (en overflow:auto
om blaai op klein skerms te aktiveer).
In plaas daarvan om 'n rand te gebruik, het ons die box-shadow
eiendom gebruik om die aftrekkieslys soos 'n "kaart" te laat lyk. Ons gebruik ook z-indeks om die aftreklys voor ander elemente te plaas.
Die :hover
kieser word gebruik om die aftrekkieslys te wys wanneer die gebruiker die muis oor die aftrekknoppie beweeg.
Regsbelynde aftreklys
Voorbeeld
Aftreklys in Navbar
Voorbeeld
Wenk: Gaan na ons CSS Dropdowns Tutoriaal om meer te wete te kom oor dropdowns.
Wenk: Gaan na ons klikbare aftreklys om meer te wete te kom oor klikbare aftrekkies