如何创建：菜单图标
学习如何使用 CSS 创建菜单图标。
如果您没有使用图标库，您可以使用 CSS 创建一个基本的菜单图标：
如何创建菜单图标
ຄັ້ງທີ່ທຳອິດ - ຕິດຕາມ HTML:
<div></div> <div></div> <div></div>
ຄັ້ງທີ່ສອງ - ຕິດຕາມ CSS:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
ຄວາມອະທິບາຍຄູ່ມື:
width ແລະ height ຜົນການກຳນົດທາງວັດສະດຸທຸກຕົວເລຍ.
ພວກເຮົາໃສ່ສີດຳສີທີ່ຫຼັງລົງສະໜາມແລະການຂອບເຂດຫຼັງກາງຂອບເຂດເພື່ອສ້າງລະຫວ່າງຕົວເລຍ.
ພິມອີກອອກຫລັງຈະມີການປ່ຽນສະຖານະ.
ນຳໃຊ້ CSS ແລະ JavaScript ເພື່ອປ່ຽນພິມສິ່ງອີກອອກຫາພິມ 'ຍົກ/ກຳຈັດ':
ຄັ້ງທີ່ທຳອິດ - ຕິດຕາມ HTML:
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
ຄັ້ງທີ່ສອງ - ຕິດຕາມ CSS:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* ແຕ່ລະການສະແດງຕົວເລຍທຳອິດ */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* ຫລຸດສູງສວຍຕົວເລຍທີສອງ */
.change .bar2 {opacity: 0;}
/* ແຕ່ລະການສະແດງຕົວເລຍສຸດທ້າຍ */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
ຄັ້ງທີ່ສາມ - ຕິດຕາມ JavaScript:
function myFunction(x) {
x.classList.toggle("change");
}
ຄວາມອະທິບາຍຄູ່ມື:
HTML ແລະ CSS: ພວກເຮົາໃຊ້ຮູບແບບດຽວກັນກັບຄັ້ງທີ່ແລ້ວ, ແຕ່ຄັ້ງນີ້ພວກເຮົາໃສ່ປະກອບປະກອມໃນແຕ່ລະ <div> ແລະກຳນົດຊີວິດໃຫ້ແຕ່ລະປະກອບ.
ປະກອບປະກອມສະນັບຖານໃຊ້ສະແດງວິທະຍັກຊີວິດໃນຖານ divs (ຕົວເລຍ) ເມື່ອຜູ້ນຳມືດສູບຂັ້ນລູກຂັ້ນ. ຖ້າມັນຖືກກົດດັນແລ້ວຈະດຳເນີນພາລະກິດ JavaScript ທີ່ຈະຕິດຕາມຊີວິດໃໝ່ເພື່ອການປ່ຽນຮູບແບບທຸກຕົວເລຍລະຫວ່າງ: ຕົວເລຍທຳອິດແລະຕົວເລຍສຸດທ້າຍຈະປ່ຽນຮູບແບບເປັນອີກລົດ 'x'. ຕົວເລຍກາງຈະຫລຸດສູງສວຍແລະຫລຸດສະຫງົບ.
