ฝากล่องสร้าง: ไอคอนเมนู

ฝากล่องสร้างไอคอนเมนู

ขั้นที่ 1 - เพิ่ม HTML:

<div></div>
<div></div>
<div></div>

ขั้นที่ 2 - เพิ่ม CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

ลองทดลองด้วยตัวเอง

ชี้แจงตัวอย่าง

width และ height แบบระบุความกว้างและความสูงของแต่ละเศษ

เพิ่มสีพื้นหลังดำและเส้นขอบด้านบนและด้านล่างเพื่อสร้างช่องว่างระหว่างเศษ

ไอคอนแอนิเมชัน

ใช้ CSS และ JavaScript เพื่อเปลี่ยนรูปแบบไอคอนเมนูเป็นไอคอน 'ยกเลิก/ลบ':

ขั้นที่ 1 - เพิ่ม HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

ขั้นที่ 2 - เพิ่ม 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);
}

ขั้นที่ 3 - เพิ่ม JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

ลองทดลองด้วยตัวเอง

ชี้แจงตัวอย่าง

HTML และ CSS: เราใช้รูปแบบที่เหมือนกันกับที่ผ่านมา แต่ครั้งนี้เราทำการลงบรรทัดกับตัวอย่างองค์ประกอบและกำหนดชื่อ class ให้กับแต่ละตัวอย่าง <div>

ตัวอย่างองค์ประกอบใช้เพื่อแสดงสัญญาณนาฬิกาเมื่อผู้ใช้เซ็ตเมาส์อยู่บน divs (สาย) ระหว่างการเซ็ตเมาส์เข้าไปด้วยเหตุนี้ จะทำงานฟังก์ชัน JavaScript ซึ่งจะเพิ่มชื่อ class ใหม่เข้าไป ซึ่งจะเปลี่ยนรูปแบบของแถวตรงแต่ละของเศษ ทางด้านแรกและทางด้านหลังของสายจะทำให้เกิดทรงทับและหมุนเป็นตัวอักษร 'x' สายทางกลางจะเร่งถ่ายทอดเป็นแถวที่ไม่มีความเห็น