Hoe OM - Klikbare aftreklys
Leer hoe om 'n klikbare aftreklys met CSS en JavaScript te skep.
Aftreklys
'n Aftrekkieslys is 'n wisselbare kieslys wat die gebruiker toelaat om een waarde uit 'n voorafbepaalde lys te kies:
Skep 'n klikbare aftreklys
Skep 'n aftreklys wat verskyn wanneer die gebruiker op 'n knoppie klik.
Stap 1) Voeg HTML by:
Voorbeeld
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" 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: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* 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 (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Voorbeeld Verduidelik
Ons het die aftrekknoppie gestileer met 'n agtergrondkleur, opvulling, sweef-effek, 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.
Stap 3) Voeg JavaScript by:
Voorbeeld
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Regsbelynde aftreklys
Voorbeeld
Aftreklys in Navbar
Voorbeeld
Soek (Filter) Aftreklys
Voorbeeld
Wenk: Gaan na ons CSS Dropdowns Tutoriaal om meer te wete te kom oor dropdowns.
Wenk: Gaan na ons Hoverable Dropdowns om meer te wete te kom oor beweegbare dropdowns