Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giản năm 2022

Posted on by mtoplistChuyên mục:Top List

Cảm nhận quý khách hàng và thời gian load time là quan trọng. Thế nên, bạn không nên chèn nhiều JavaScript hoặc hình lớn vào Wesbite. nếu muốn có một thanh Menu CSS đẹp thì sao? Không cần vận dụng JavaScript đâu bạn, tại thời điểm này tạo Menu xổ xuống bằng CSS. Trong bài hướng dẫn Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giản năm 2022 sẽ giúp bạn.

Menu xổ xuống là gì?

Menu xổ là một trong những thành phần cơ bản nhất cho mọi Website có nhiều điều hướng – cái mà Menu thường theo kiểu dàn trải toàn bộ không thể thay thế được vì chiếm quá nhiều diện tích.

Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giản

Bạn cần chuẩn bị gì?

Trước khi bắt đầu bạn cần tối ưu bị:

Truy cập được vào control panel hosting của bạn

Bước 1 — Tạo tệp HTML

Trước tiên bạn cần tạo một tệp HTML trắng. Trong chỉ dẫn này chúng tôi sẽ tạo file có tên Menu.html. Chúng tôi dùng file Manager cho Việc này. tuy vậy, bạn cũng có upload qua một FTP client (tạo Menu.html trên máy tính và upload lên máy).

Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giảnHướng dẫn tạo Menu xổ xuống bằng CSS đơn giản

Bước 2 — Thêm mã Menu HTML

Menu của chúng tôi được tạo bởi mục chính là Main Menu và 5 mục con. bằng cách đổi địa chỉ URL bên trong href attribute bạn sẽ liên kết Child Menu tới một trang còn lại trong Website của bạn. bạn sẽ đã phát hiện ra mỗi mục có một class khác nhau – dropdown, mainmenubtn và dropdown-child. Class cần được vận dụng để tạo CSS rules khác nhau.

<div class=”dropdown”>
<button class=”mainmenubtn”>Main Menu</button>
<div class=”dropdown-child”>
<a href=”http://wwww.yourdonain.com/page1.html”>Child Menu 1</a>
<a href=”http://wwww.yourdonain.com/page2.html”>Child Menu 2</a>
<a href=”http://wwww.yourdonain.com/page3.html”>Child Menu 3</a>
<a href=”http://wwww.yourdonain.com/page4.html”>Child Menu 4</a>
<a href=”http://wwww.yourdonain.com/page5.html”>Child Menu 5</a>
</div>
</div>

Như bạn thấy HTML Menu không được tối ưu và trông có vẻ không tốt. Tuy nhiên, chúng tôi đã áp dụng CSS rules và đổi nó ở bước sau.

Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giảnHướng dẫn tạo Menu xổ xuống bằng CSS đơn giản

Bước 3 — Áp dụng Menu CSS và tạo hiệu ứng Dropdown

Chúng tôi sẽ làm đẹp HTML code của mình bằng CSS rules sau

.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}

.mainmenubtn:hover {
background-color: red;
}

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}

Như bạn thấy .dropdown-child có CSS rule display: none. tuy vậy, ngay khi khách hàng di chuột tới (.dropdown:hover) mục chính, CSS rule sẽ đổi thành display: block. Việc này sẽ tạo hiệu ứng thanh Menu xổ xuống

Phía dưới là kết quả cuối cùng của Menu.html document:

<html>
<head>
<style>
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class=”dropdown”>
<button class=”mainmenubtn”>Main Menu</button>
<div class=”dropdown-child”>
<a href=”http://wwww.yourdonain.com/page1.html”>Child Menu 1</a>
<a href=”http://wwww.yourdonain.com/page2.html”>Child Menu 2</a>
<a href=”http://wwww.yourdonain.com/page3.html”>Child Menu 3</a>
<a href=”http://wwww.yourdonain.com/page4.html”>Child Menu 4</a>
<a href=”http://wwww.yourdonain.com/page5.html”>Child Menu 5</a>
</div>
</div>
</body>
</html>

Trong bài hướng dẫn này chúng ta được biết việc dùng CSS styles có thể được áp dụng cho cùng một tệp HTML. Tuy nhiêu có nhiều cách để liện kết giữa CSS và HTML document.

Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giảnHướng dẫn tạo Menu xổ xuống bằng CSS đơn giản

Khi bạn đã hoàn tất, kết quả cuối cùng như sau:

Main Menu

Hãy cứ tự nhiên cảm nhận CSS theo luật và bất kỳ chuyển đổi nào màu sắc và kích thước. Hãy lấy Menu này, những gì bạn phải cần làm là đổi màu và kích thước. Áp dụng Menu css này ăn nhập hơn vào blog của bạn.

(Nguồn: Tổng hợp)

Lời tổng kết

Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về Hướng dẫn tạo Menu xổ xuống bằng CSS đơn giản năm 2022. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

ATP WEB – XÂY DỰNG NGÔI NHÀ ONLINE

  • Hotline: 0707 6666 56
  • Fanpage: ATP Web
  • Gmail: [email protected]
  • Website: https://atpweb.vn/blog/

Đánh giá post

mtoplist