Miten luoda: Pudotusvalikkovalikkokontaineri
- Edellinen sivu Lahkepudotusvalikko
- Seuraava sivu Sivupalkin dropdown-valikko
Opit, miten luoda pudotusvalikkovalikkokontaineri.
Valikkokontainerin pudotusvalikko
Luo pudotusvalikkovalikkokontaineri
Kun käyttäjä siirtää hiiren ohjaimen valikkokontainerin elementin päälle, näkyy pudotusvalikko.
Ensimmäinen vaihe - Lisää HTML:ää:
<div class="navbar">
<a href="#home">Koti</a>
<a href="#news">Uutiset</a>
<div class="dropdown">
<button class="dropbtn">Pudotusvalikko
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Linkki 1</a>
<a href="#">Linkki 2</a>
<a href="#">Linkki 3</a>
</div>
</div>
</div>
Esimerkki selityksestä:
Avaa pudotusvalikko millä tahansa elementillä, esimerkiksi <button>, <a> tai <p>-elementillä.
Luo pudotusvalikko käyttämällä kontainerielementtiä (esim. <div>) ja lisää siihen pudotusvalikon linkit.
Käytä <div>-elementtiä peittääksesi painikkeen ja toisen <div>-elementin, jotta CSS voi sijoittaa pudotusvalikon oikein.
Toinen vaihe - Lisää CSS:ä:
/* Valikkokontainer */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Valikkolinkkien määrittely */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Pudotus容器 */
.dropdown {
float: left;
overflow: hidden;
}
/* Pudotusnapin määrittely */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Tärkeää pystysuuntaiselle tasapainolle mobiililaitteissa */
margin: 0; /* Tärkeää puhelimille vertikaalisen tasapainon kannalta */
}
/* Lisää punainen taustaväri navigaatiopalkin linkkeihin hiiren osoitettuna */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Pudotusvalikon sisältö (oletuksena piilotettu) */
.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;
}
/* Pudotusvalikon linkit */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Lisää harmaa taustaväri pudotusvalikon linkkeihin hiiren osoitettuna */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Näytä pudotusvalikko hiiren osoitettuna */
.dropdown:hover .dropdown-content {
display: block;
}
Esimerkki selityksestä:
Olemme asettaneet navigaatiopalkille ja navigaatiopalkin linkkeille taustavärin, sisennyksen ja muiden tyylejä.
Olemme asettaneet pudotusvalikon painikkeelle taustavärin, sisennyksen ja muiden tyylejä.
.dropdown Luokka on .dropdown-content Sisällön kontti. Koska tämä on <div>-elementti, ei <a>-elementti, meidän on tehtävä siitä liukuvaa varmistaaksemme, että se pysyy linkin viereen.
.dropdown-content Luokka sisältää todellisen pudotusvalikon. Se on oletuksena piilotettu ja näkyy hiiren osoitettuna (katso alla). Huomaa, että pienin leveys on asetettu 160px. Voit muuttaa tätä asetusta vapaasti.
Emme käytä reunaa, vaan box-shadow Atribuutti tekee pudotusvalikosta näyttämään kuin kortin. z-index Aseta pudotusvalikko muiden elementtien eteen.
:hover Valitsin näyttää pudotusvalikon, kun käyttäjä siirtää hiiren pudotusvalikon painikkeelle.
Klikattavat pudotusvalikot navigaatiopalkissa
Liittyvät sivut
Oppitunti:CSS pudotusvalikko
Oppitunti:Kuinka luoda klikattava pudotusvalikko
Oppitunti:CSS navigointirivi
Oppitunti:Kuinka luoda reagoiva ylivalikko
- Edellinen sivu Lahkepudotusvalikko
- Seuraava sivu Sivupalkin dropdown-valikko
