Hoe OM - Dropdown Navbar
Leer hoe om 'n aftreklys-navigasiebalk te skep.
Aftreklys in Navbar
Skep 'n dropdown-navigasiebalk
Skep 'n aftreklys wat verskyn wanneer die gebruiker die muis oor 'n element in 'n navigasiebalk beweeg.
Stap 1) Voeg HTML by:
Voorbeeld
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</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
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:
inherit; /* Important for vertical align on mobile phones */
margin:
0; /* Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* 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
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
Voorbeeld Verduidelik
Ons het die navigasiebalk en die navigasiebalkskakels met 'n agtergrondkleur, opvulling, ens.
Ons het die aftrekknoppie gestileer met 'n agtergrondkleur, opvulling, ens.
Die .dropdown
klas is die houer vir
.dropdown-content
. Aangesien dit 'n <div>-element is, en nie 'n <a>-element nie, moet ons dit laat dryf om seker te maak dat dit langs die skakels bly.
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.
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.
Klikbare 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
Wenk: Gaan na ons CSS Navbar Tutoriaal om meer te wete te kom oor navbars.
Wenk: Gaan na ons Responsiewe Topnavigasie om uit te vind hoe om 'n responsiewe navigasiebalk te skep.