Hur skapar: menyikon

Lär dig hur du skapar en menyikon med CSS.

Om du inte använder en ikonbibliotek, kan du använda CSS för att skapa en grundläggande menyikon:

Menyikon:

Prova själv

Animerad menyikon (klicka på den):

Prova själv

Hur skapar man en menyikon

Första steg - Lägg till HTML:

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

Andra steg - Lägg till CSS:

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

Prova själv

Exempel förklaring:

width och height Egenskaper specificerar varje stripes bredd och höjd.

Vi lade till en svart bakgrundsfärg samt övre och nedre marginaler för att skapa avstånd mellan varje stripe.

Animerad ikon

Använd CSS och JavaScript för att ändra menyikonen till "Avbryt/Ta bort"-ikonen när den klickas på:

Första steg - Lägg till HTML:

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

Andra steg - Lägg till CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Roterar första stolpen */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Blek ut andra stolpen */
.change .bar2 {opacity: 0;}
/* Roterar sista stolpen */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Tredje steg - Lägg till JavaScript:

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

Prova själv

Exempel förklaring:

HTML och CSS: Vi använde samma stil som tidigare, men denna gång omslöt vi varje <div>-element med en container-element och angav en klass för varje element.

Container element används för att visa en pekare när användaren håller muspekaren över divs (linjer). När den klickas på, körs en JavaScript-funktion som lägger till en ny klass, vilket ändrar stilen för varje horisontell stripe: Första och sista linjen deformerar och roterar till bokstaven "x". Mellersta linjerna bleknar gradvis ut och blir osynliga.