Jak tworzyć: ikona menu
- Poprzednia strona Panel ikon
- Następna strona Flet
Naucz się, jak używać CSS do tworzenia ikon menu.
Jeśli nie używasz biblioteki ikon, możesz użyć CSS do utworzenia podstawowej ikony menu:
Jak utworzyć ikonę menu
Krok 1 - Dodaj HTML:
<div></div> <div></div> <div></div>
Krok 2 - Dodaj CSS:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Przykład wyjaśnienia:
width i height Atrybuty określają szerokość i wysokość każdej belki.
Dodaliśmy czarny kolor tła oraz górne i dolne marginesy, aby stworzyć przestrzeń między belkami.
Ikony animacji
Używając CSS i JavaScript, zmień ikonę menu na "anuluj/usuń" ikonę, gdy jest kliknięty:
Krok 1 - Dodaj HTML:
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
Krok 2 - Dodaj CSS:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Obróć pierwszą belkę */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Zanikaj druga belka */
.change .bar2 {opacity: 0;}
/* Obróć ostatnią belkę */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
Krok 3 - Dodaj JavaScript:
function myFunction(x) {
x.classList.toggle("change");
}
Przykład wyjaśnienia:
HTML i CSS: Użyliśmy tych samych stylów, ale tym razem otoczyliśmy każdy element <div> elementem kontenerowym i przypisaliśmy każdemu elementowi klasę.
Elementy kontenerowe służą do wyświetlania znaku wskaźnika, gdy użytkownik wskazuje myszą na divs (linie). Kiedy jest kliknięty, wykonuje funkcję JavaScript, która dodaje nową klasę, co zmienia styl każdej pionowej belki: pierwsza i ostatnia linia zostaną przekształcone i obrócone w literę "x". Środkowe linie będą stopniowo się rozjaśniać i stawać się niewidoczne.
- Poprzednia strona Panel ikon
- Następna strona Flet
