CÁCH LÀM - 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:
Biểu tượng Menu:
Biểu tượng Menu hoạt hình (nhấp vào nó):
Bước 1) Thêm HTML:
Thí dụ
<div></div>
<div></div>
<div></div>
Bước 2) Thêm CSS:
Thí dụ
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Giải thích ví dụ
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 một màu đen background-color
, và trên cùng và dưới cùng margin
đượ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 nó được nhấp vào:
Bước 1) Thêm HTML:
Thí 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:
Thí 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 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Bước 3) Thêm JavaScript:
Thí dụ
function myFunction(x) {
x.classList.toggle("change");
}
Giải thích ví dụ
HTML & CSS: Chúng tôi sử dụng các kiểu giống như trước đây, chỉ khác là 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 nó được nhấp vào, nó sẽ thực thi một hàm JavaScript bổ sung tên lớp mới cho nó, điều 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.