Jak to zrobić — ikona menu
Dowiedz się, jak utworzyć ikonę menu za pomocą CSS.
Jak stworzyć ikonę menu
Jeśli nie używasz biblioteki ikon, możesz utworzyć podstawową ikonę menu za pomocą CSS:
Ikona menu:
Animowana ikona menu (kliknij na nią):
Krok 1) Dodaj kod HTML:
Przykład
<div></div>
<div></div>
<div></div>
Krok 2) Dodaj CSS:
Przykład
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Przykład wyjaśniony
Właściwość width
and height
określa szerokość i wysokość każdego słupka.
Dodaliśmy czarny background-color
, a góra i dół margin
służą do tworzenia pewnej odległości między każdym paskiem.
Animowana ikona
Użyj CSS i JavaScript, aby zmienić ikonę menu na ikonę „anuluj/usuń” po kliknięciu:
Krok 1) Dodaj kod 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
function myFunction(x) {
x.classList.toggle("change");
}
Przykład wyjaśniony
HTML i CSS: Używamy tych samych stylów co poprzednio, tylko tym razem owijamy element kontenera wokół każdego elementu <div> i określamy nazwę klasy dla każdego.
Element kontenera służy do pokazania symbolu wskaźnika, gdy użytkownik najedzie myszą na elementy div (paski). Po kliknięciu uruchomi funkcję JavaScript, która doda do niego nową nazwę klasy, która zmieni styl każdego poziomego paska: pierwszy i ostatni pasek zostaną przekształcone i obrócone do litery „x”. Środkowy pasek znika i staje się niewidoczny.