MENUS
IMAGES
BUTTONS
FORMS
FILTERS
TABLES
MORE
WEBSITE
GRID
GOOGLE MAP
CONVERTERS
HOW TO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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).

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Dưới đây là một ví dụ về một menu icon:

2018 05 20 145514 png

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é:

HTML
<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

CSS RUN
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-topmargin-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ả:

2018 05 20 145514 1  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é.

HTML
<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.

CSS
.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é.

Javascript RUN
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ả:

Untitled 1 png

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

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top