Hướng dẫn tạo Menu Icon với HTML và CSS - How t

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 Zaidap.com.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â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ả:

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

DEMO