Dowiedz się, jak stworzyć ikonę menu z CSS.
Jak utworzyć menu Ikona
Jeśli nie korzystasz z biblioteki ikon, można utworzyć podstawowy ikonę menu z CSS:
Ikona menu:
Animowane ikony menu (click on it) :
Krok 1) Dodaj HTML:
Przykład
<div></div>
<div></div>
<div></div>Krok 2) Dodaj CSS:
Przykład Poradnik
width i height właściwość określa szerokość i wysokość każdego słupka.
Dodaliśmy czarną background-color , a górny i dolny margin jest używany do tworzenia pewnej odległości pomiędzy każdym barze.
Animowane Ikona
Użyj CSS i JavaScript, aby zmienić ikonę menu na "cancel/remove" ikona po jego kliknięciu na:
Krok 1) Dodaj HTML:
Przykład
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>Krok 2) Dodaj CSS:
Przykład
.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) ;
}Krok 3) Dodaj JavaScript:
Przykład Poradnik
HTML & CSS: Jesteśmy jak poprzednio wykorzystują te same style, tylko ten czas, możemy owinąć wokół każdego pojemnika elementu <div> elementu i określić nazwę klasy dla każdego.
Element pojemnik służy do wyświetlania symbolu wskaźnika, gdy użytkownik przesunie kursor nad div (bars) . Po jego kliknięciu, będzie wykonywał funkcję JavaScript, która dodaje nową nazwę klasy do niego, co spowoduje zmianę stylów każdego pręta poziomego: pierwszy i ostatni pasek jest przekształcany i obracać do litery "x" . Bar w środku zanika i staje się niewidoczny.