Làm thế nào để tạo: Biểu tượng menu
- Trang trước Thanh biểu tượng
- Trang tiếp theo Trượt cuộn
Học cách sử dụng CSS để 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ể sử dụng CSS để tạo biểu tượng menu cơ bản:
Làm thế nào để tạo biểu tượng menu
Bước 1 - Thêm HTML:
<div></div> <div></div> <div></div>
Bước 2 - Thêm CSS:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Giải thích ví dụ:
width và height Thuộc tính xác định chiều rộng và chiều cao của mỗi thanh.
Chúng tôi đã thêm màu nền đen và khoảng cách ngoài biên trên dưới để tạo khoảng cách giữa mỗi thanh.
Biểu tượng động
Sử dụng CSS và JavaScript, thay đổi biểu tượng menu thành biểu tượng 'Hủy/Loại bỏ' khi được nhấp:
Bước 1 - Thêm HTML:
<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:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Quay thanh đầu tiên */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Mờ dần thanh thứ hai */
.change .bar2 {opacity: 0;}
/* Quay thanh cuối cùng */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
Bước 3 - Thêm JavaScript:
function myFunction(x) {
x.classList.toggle("change");
}
Giải thích ví dụ:
HTML và CSS: Chúng tôi đã sử dụng cùng một phong cách như trước, nhưng lần này chúng tôi đã bao bọc mỗi yếu tố <div> bởi một yếu tố hộp và đã chỉ định một tên lớp cho mỗi yếu tố.
Các yếu tố hộp được sử dụng để hiển thị một biểu tượng con trỏ khi người dùng di chuột qua divs (dòng). Khi nó được nhấp, nó sẽ thực hiện một hàm JavaScript, hàm này sẽ thêm một tên lớp mới, điều này sẽ thay đổi phong cách của mỗi thanh ngang: thanh đầu tiên và cuối cùng sẽ biến dạng và quay thành chữ 'x'. Các thanh giữa sẽ mờ dần và biến mất.
- Trang trước Thanh biểu tượng
- Trang tiếp theo Trượt cuộn
