Hoe - Menupictogram
Leer hoe u een menupictogram maakt met CSS.
Een menupictogram maken
Als u geen pictogrambibliotheek gebruikt, kunt u een eenvoudig menupictogram maken met CSS:
Menupictogram:
Geanimeerd menupictogram (klik erop):
Stap 1) HTML toevoegen:
Voorbeeld
<div></div>
<div></div>
<div></div>
Stap 2) CSS toevoegen:
Voorbeeld
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Voorbeeld uitgelegd
De width
en de height
eigenschap specificeert de breedte en hoogte van elke staaf.
We hebben een zwarte toegevoegd background-color
en de boven- en onderkant margin
worden gebruikt om enige afstand tussen elke balk te creëren.
Geanimeerd pictogram
Gebruik CSS en JavaScript om het menupictogram te wijzigen in een "annuleren/verwijderen"-pictogram wanneer erop wordt geklikt:
Stap 1) HTML toevoegen:
Voorbeeld
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Stap 2) CSS toevoegen:
Voorbeeld
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Stap 3) JavaScript toevoegen:
Voorbeeld
function myFunction(x) {
x.classList.toggle("change");
}
Voorbeeld uitgelegd
HTML & CSS: we gebruiken dezelfde stijlen als voorheen, maar deze keer wikkelen we een containerelement rond elk <div>-element en specificeren we een klassenaam voor elk.
Het containerelement wordt gebruikt om een aanwijzersymbool weer te geven wanneer de gebruiker de muis over de divs (balken) beweegt. Wanneer erop wordt geklikt, zal het een JavaScript-functie uitvoeren die er een nieuwe klassenaam aan toevoegt, die de stijlen van elke horizontale balk zal veranderen: de eerste en de laatste balk worden getransformeerd en geroteerd naar de letter "x". De balk in het midden vervaagt en wordt onzichtbaar.