Cách thực hiện - Biểu tượng menu
Tìm hiểu cách tạo biểu tượng menu bằng CSS.
Cách tạo biểu tượng menu
Nếu bạn không sử dụng thư viện biểu tượng, bạn có thể tạo biểu tượng menu cơ bản bằng CSS:
Bước 1) Thêm HTML:
Ví dụ
<div></div>
<div></div>
<div></div>
Bước 2) Thêm CSS:
Ví dụ giải thích
Thuộc tính width
và height
chỉ định chiều rộng và chiều cao của mỗi thanh.
Chúng tôi đã thêm background-color
đen và margin
trên và dưới được sử dụng để tạo khoảng cách giữa mỗi thanh.
Biểu tượng hoạt hình
Sử dụng CSS và JavaScript để thay đổi biểu tượng menu thành biểu tượng "hủy/xóa" khi nhấp vào:
Bước 1) Thêm HTML:
Ví dụ
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Bước 2) Thêm CSS:
Ví dụ
.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);
}
Bước 3) Thêm JavaScript:
Ví dụ giải thích
HTML & CSS: Chúng tôi sử dụng các kiểu giống như trước đây, chỉ lần này, chúng tôi bọc một phần tử vùng chứa xung quanh mỗi phần tử <div> và chúng tôi chỉ định tên lớp cho mỗi phần tử.
Phần tử vùng chứa được sử dụng để hiển thị biểu tượng con trỏ khi người dùng di chuyển chuột qua các div (thanh). Khi được nhấp vào, nó sẽ thực thi một hàm JavaScript để thêm tên lớp mới vào đó, tên này sẽ thay đổi kiểu của từng thanh ngang: thanh đầu tiên và thanh cuối cùng được chuyển đổi và xoay thành chữ "x". Thanh ở giữa mờ dần và trở nên vô hình.