Hvordan oprette: Menu ikoner

Lær hvordan du opretter menu ikoner med CSS.

Hvis du ikke bruger en ikonbibliotek, kan du bruge CSS til at oprette et grundlæggende menu ikon:

Menu ikoner:

Prøv det selv

Animerede menu ikoner (klik på det):

Prøv det selv

Hvordan oprette menu ikoner

Første trin - Tilføj HTML:

<div></div>
<div></div>
<div></div>

Andet trin - Tilføj CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Prøv det selv

Eksempel forklaring:

width og height Egenskaber specificerer bredden og højden af hver stribe.

Vi har tilføjet sort baggrundsfarve samt øvre og nedre marginer for at skabe afstand mellem hver stribe.

Animation ikon

Brug CSS og JavaScript til at ændre menuikonet til “Annuller/slet”-ikon, når det klikkes på:

Første trin - Tilføj HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Andet trin - Tilføj CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotér første bane */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Fade ud anden bane */
.change .bar2 {opacity: 0;}
/* Rotér sidste bane */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Tredje trin - Tilføj JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

Prøv det selv

Eksempel forklaring:

HTML og CSS: Vi har brugt de samme stilarter som tidligere, men denne gang har vi omgivet hver <div>-element med et kontainerelement og tildelt hver element en klasse.

Kontainerelementer bruges til at vise en pegesymbol, når brugeren hæver musen over divs (linjer). Når det klikkes på, udfører det en JavaScript-funktion, der tilføjer en ny klasse til det, hvilket ændrer stilen på hver vandret stribe: Første og sidste linje vil deformere og rotere til bogstavet “x”. Mellemstrengene vil gradvist fade ud og blive usynlige.