CSS -aftrekkies
Skep 'n hangbare aftreklys met CSS.
Demo: Dropdown Voorbeelde
Beweeg die muis oor die voorbeelde hieronder:
Basiese aftreklys
Skep 'n aftrekblokkie wat verskyn wanneer die gebruiker die muis oor 'n element beweeg.
Voorbeeld
<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>
Voorbeeld Verduidelik
HTML) Gebruik enige element om die dropdown-inhoud oop te maak, bv 'n <span>, of 'n <button> element.
Gebruik 'n houerelement (soos <div>) om die aftrek-inhoud te skep en voeg wat jy ook al daarin wil hê.
Draai 'n <div>-element om die elemente om die aftrek-inhoud korrek met CSS te posisioneer.
CSS) Die .dropdownklas 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-contentklas hou die werklike aftrek-inhoud. Dit is by verstek versteek en sal vertoon word wanneer jy beweeg (sien hieronder). Let daarop min-widthdat 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 widthop 100% (en overflow:autoom blaai op klein skerms te aktiveer).
In plaas daarvan om 'n grens te gebruik, het ons die CSS box-shadow-eienskap gebruik om die aftreklys soos 'n "kaart" te laat lyk.
Die :hoverkieser word gebruik om die aftrekkieslys te wys wanneer die gebruiker die muis oor die aftrekknoppie beweeg.
Aftrekkieslys
Skep 'n aftreklys wat die gebruiker toelaat om 'n opsie uit 'n lys te kies:
Hierdie voorbeeld is soortgelyk aan die vorige een, behalwe dat ons skakels in die aftrekkassie byvoeg en dit styl om by 'n gestileerde aftrekknoppie te pas:
Voorbeeld
<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);
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: #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>
Regsbelynde aftreklysinhoud
As jy wil hê dat die aftreklys van regs na links moet gaan, in plaas van links na regs, voeg byright: 0;
Voorbeeld
.dropdown-content {
right: 0;
}
Meer voorbeelde
Aftreklys prent
Hoe om 'n prent en ander inhoud in die aftreklys by te voeg.
Beweeg oor die prent:
Aftreklys Navbar
Hoe om 'n aftreklys in 'n navigasiebalk by te voeg.