Kuinka luoda: valikkoikoni
- Edellinen sivu Ikoni valikko
- Seuraava sivu Housut
Opit CSS:n avulla valikkoikonien luomisen.
Jos et käytä ikonikirjastoa, voit luoda perusvalikkoikonin CSS:n avulla:
Kuinka luoda valikkoikonia
Ensimmäinen vaihe - Lisää HTML:
<div></div> <div></div> <div></div>
Toinen vaihe - Lisää CSS:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Esimerkki selityksestä:
width ja height Atribuutit määrittelevät jokaisen viivan leveyden ja korkeuden.
Lisäsimme mustan taustavärin ja ylä-alapuoliset reunat luodaksemme välit jokaisen viivan välillä.
Animaatiokuvakkeet
Käytä CSS ja JavaScript muuttaaksesi valikkokuvaketta 'Peruuta/poista' kuvakkeeksi:
Ensimmäinen vaihe - Lisää HTML:
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
Toinen vaihe - Lisää CSS:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Pyöritä ensimmäistä palikkaa */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Peitä toinen palikka vähitellen */
.change .bar2 {opacity: 0;}
/* Pyöritä viimeistä palikkaa */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
Kolmas vaihe - Lisää JavaScript:
function myFunction(x) {
x.classList.toggle("change");
}
Esimerkki selityksestä:
HTML ja CSS: Käytimme samaa tyyliä kuin aikaisemmin, mutta tämä kerta jokaiselle <div>-elementille sisällytettiin konttietelementti ja jokaiselle elementille määritettiin luokka.
Konttietelementti näyttää viittomakuvakkeen, kun käyttäjä hoveraa divs (viivat) päällä. Kun se napsautetaan, se suorittaa JavaScript-funktion, joka lisää sille uuden luokan, mikä muuttaa jokaisen vaakalevyn tyyliä: ensimmäinen ja viimeinen viiva muuttuvat muotoon 'x' ja pyörittävät. Keskimmäiset viivat peittyvät vähitellen ja tulevat näkymättömiksi.
- Edellinen sivu Ikoni valikko
- Seuraava sivu Housut
