Hoe OM - Dropup
Leer hoe om 'n keuselys met CSS te skep.
Dropup
'n Aftrekkieslys is 'n wisselbare spyskaart waarmee die gebruiker een waarde uit 'n voorafbepaalde lys kan kies:
Skep 'n Hoverable Dropup
Skep 'n keuselys wat verskyn wanneer die gebruiker die muis oor 'n element beweeg.
Stap 1) Voeg HTML by:
Voorbeeld
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-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 keuselys oop te maak, bv. 'n <knoppie>, <a> of <p> element.
Gebruik 'n houerelement (soos <div>) om die aftrekkieslys te skep en voeg die aftrekskakels daarin by.
Draai 'n <div>-element om die knoppie en die <div> om die keuselys korrek met CSS te posisioneer.
Stap 2) Voeg CSS by:
Voorbeeld
/* Dropup Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The
container <div> - needed to position the dropup content */
.dropup {
position: relative;
display:
inline-block;
}
/* Dropup content (Hidden by Default) */
.dropup-content {
display: none;
position:
absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the
dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}
/* Show the
dropup menu on hover */
.dropup:hover .dropup-content {
display: block;
}
/* Change the background color of the dropup button when the
dropup content is shown */
.dropup:hover .dropbtn {
background-color: #2980B9;
}
Voorbeeld Verduidelik
Ons het die drop-up-knoppie met 'n agtergrondkleur, opvulling, ens.
Die .dropup
klas gebruik position:relative
, wat nodig is wanneer ons wil hê dat die drop-up-inhoud bo-op die drop-up-knoppie geplaas moet word (met position:absolute
).
Die .dropup-content
klas hou die werklike drop-up menu. 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 drop-up-inhoud so wyd soos die drop-up-knoppie 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 keuselys soos 'n "kaart" te laat lyk. Ons gebruik ook z-indeks om die drop-up voor ander elemente te plaas.
Die :hover
kieser word gebruik om die drop-up-kieslys te wys wanneer die gebruiker die muis oor die drop-up-knoppie beweeg.