Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Hướng dẫn tạo Menu Icon với HTML và CSS
Menu Icon thường được sử dụng nhiều trong khi thiết kế thanh navigation cho website. Thiết kế một menu icon sẽ làm cho website của chúng ta đẹp hơn, khoa học và hiện đại hơn rất nhiều. Vậy làm sao để thiết kế được một menu icon? Hôm nay, mình cùng các bạn sẽ tìm hiểu nhé.
Menu Icon là một biểu tượng nhỏ, thường dùng trong thiết kế responsive. Ví dụ khi bạn vào website freetuts.net thì sẽ thấy phần menu rất là nhiều, nên khi hiển thị trên điện thoại ta phải ẩn nó đi và gom gọn vào một biểu tượng nhỏ và ta gọi biển tượng đó là menu icon. Khi người dùng click vào icon này thì menu sẽ được xổ xuống hoặc trược ngang (tùy vào giao diện mỗi web khác nhau).
Dưới đây là một ví dụ về một menu icon:
Bài viết này được đăng tại [free tuts .net]
Bây giờ mình cùng các bạn đi vào nghiên cứu chi tiết để thiết kế ra một menu icon nhé.
Menu icon tĩnh
Mình gọi là menu icon tĩnh vì khi mình thực hiện click vào cái icon nó không thay đổi giao diện.
HTML
Đầu tiên bạn viết HTML vào file HTML nhé:
<p>Ví dụ về menu icon:</p> <div></div> <div></div> <div></div>
Ở đây mình thiết kế 3 thẻ div thương ứng với 3 dấu gạch ngang của menu icon.
CSS
Sau đó, bạn thiết lập css cho các thẻ div này.
Dưới đây là css của mình, bạn có thể tham khảo làm tương tự, bạn có thể thay đổi màu hay kích thước của menu icon tùy theo ý mình
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Thuộc tính width và height là hiển thị chiều cao vào chiều rộng của từng thanh.
Thiết lập background-color là màu đen và thêm thuộc tính margin-top và margin-bottom để tạo khoảng cách giữa các thanh, cho các thanh không bị dính vào nhau. Các bạn click "run" để so sánh và kiểm tra kết quả nhé.
Kết quả:
.png)
Menu icon động
Gọi là động bởi vì khi mình click vào icon menu đó nó sẽ chuyển sang một hình khác.
HTML
Cũng tương tự nhé phần trên. Đầu tiên bạn cũng nhập mã HTML vào file HTML nhé.
<p>Click vào Menu Icon để thấy sự thay đổi</p> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
CSS
Tiếp theo là css gợi ý của mình.
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}Javascript
Vì menu icon có một chút biến đổi nên phần này các bạn thêm cho mình một đoạn mã Javascript sau đây nhé.
function myFunction(x) {
x.classList.toggle("change");
}Mình tạo thêm một thẻ div có class là container, nó có chứ năng bao các div bên trong(các div này là các thanh ngang của menu icon). Thẻ này được sử dụng để khi người dùng di chuột và click vào menu icon thì nó sẽ thực hiện hàm myFunction() trong javascript để thêm tên lớp mới vào đó, điều này sẽ làm thay đổi các thanh ngang trong menu icon: thanh đầu và thanh cuối cùng được chuyển đổi và xoay thành chữ X, thanh ở giữa mờ dần và biến mất.
Giờ thì "run" để kiểm tra thành quả của mình nhé!
Kết quả:
Lời kết
Việc tạo được một menu icon thật không quá khó phải không các bạn. Một hình menu icon nhỏ thôi nhưng cũng làm trang web của chúng ta trở nên khoa học và đẹp hơn.
Chúc các bạn thành công nhé!
Nguồn: https://www.w3schools.com/howto/howto_css_menu_icon.asp
