Menyu ikonkasi
CSS yordamida menyu ikonkasini yaratishni o‘rganing.
Menyu ikonkasi qanday yaratiladi
Agar ikonkalar kutubxonasidan foydalanmayotgan bo‘lsangiz, CSS yordamida oddiy menyu ikonkasini yaratishingiz mumkin:
1-qadam) HTML qo‘shing:
Misol
<div></div>
<div></div>
<div></div>
2-qadam) CSS qo‘shing:
Misol
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
O‘zingiz sinab ko‘ring »
Misol tahlili
width va height xossalari har bir chiziqning kengligi va balandligini belgilaydi.
Biz qora background-color qo‘shdik, yuqori va pastki margin esa chiziqlar orasida biroz masofa hosil qilish uchun ishlatiladi.
Animatsiyali ikonka
Menyu ikonkasi bosilganda uni "bekor qilish/o‘chirish" ikonkasiga aylantirish uchun CSS va JavaScript’dan foydalaning:
1-qadam) HTML qo‘shing:
Misol
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
2-qadam) CSS qo‘shing:
Misol
.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 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {opacity: 0;}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
3-qadam) JavaScript qo‘shing:
Misol tahlili
HTML va CSS: Avvalgi uslublardan foydalanamiz, faqat bu safar har bir <div> elementini konteyner element bilan o‘raymiz va har biriga klass nomini belgilaymiz.
Konteyner element foydalanuvchi sichqonchani div’lar (chiziqlar) ustiga olib borganda ko‘rsatkich (pointer) belgisini ko‘rsatish uchun ishlatiladi. U bosilganda JavaScript funksiyasi ishga tushadi va unga yangi klass nomini qo‘shadi, bu esa har bir gorizontal chiziqning uslubini o‘zgartiradi: birinchi va oxirgi chiziq shakli o‘zgartirilib, "x" harfi ko‘rinishida buriladi. O‘rtadagi chiziq asta so‘nib, ko‘rinmas bo‘lib qoladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!