Cách Tạo Dropdown Và 15 Ví Dụ Dropdown Cho Thiết Kế Web

Nếu như bạn tạo một menu hay navigation chứa quá nhiều đường dẫn điều hướng thì nó sẽ gây ra cảm giác khó đọc cho người dùng cũng như không hiển thị tốt trên các màn hình thiết bị nhỏ. Do đó dropdown ra đời để giải quyết vấn đề trên. Nhiệm vụ chính của nó là tạo cấu trúc mạch lạc rõ ràng giúp người dùng có cái nhìn tổng quan hơn cũng như gom các đường dẫn con vào một mục chính để có thể giảm diện tích sử dụng trong trang web. Để hiểu rõ hơn bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Cách Tạo Dropdown Bằng HTML CSS

Trong phần này chúng ta sẽ tận dụng thuộc tính :hover trong CSS để tạo dropdown cho trang web nhé.
Bước đầu tiên là bạn cần tạo cấu trúc HTML cho conponent này thông qua đoạn code dưới đây nha:

<div class="dropdown">
   <button class="nut_dropdown">Dropdown</button>
   <div class="noidung_dropdown">
     <a href="#">Đường Dẫn 1</a>
     <a href="#">Đường Dẫn 2</a>
     <a href="#">Đường Dẫn 3</a>
   </div>
 </div>

/* Nút Dropdown*/ .nut_dropdown { background-color: #0080ff; color: white; padding: 16px; font-size: 16px; border: none; } /* Thiết lập vị trí cho thẻ div với class dropdown*/ .dropdown { position: relative; display: inline-block; } /* Nội dung Dropdown */ .noidung_dropdown { /*Ẩn nội dung các đường dẫn*/ display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Thiết kế style cho các đường dẫn trong Dropdown */ .noidung_dropdown a { color: black; padding: 12px 16px; text-decoration: none; display: block; }

/* thay đổi màu background khi hover vào đường dẫn */ .noidung_dropdown a:hover {background-color: #ddd;} /* hiển thị nội dung dropdown khi hover */ .dropdown:hover .noidung_dropdown {display: block;} /* Thay đổi màu background cho nút khi được hover */ .dropdown:hover .nut_dropdown {background-color: #00bfff;}

<div class="dropdown"> <button onclick="hamDropdown()" class="nut_dropdown">Dropdown</button> <div class="noidung_dropdown"> <a href="#">Đường Dẫn 1</a> <a href="#">Đường Dẫn 2</a> <a href="#">Đường Dẫn 3</a> </div> </div>

/* Nút Dropdown*/ .nut_dropdown { background-color: #0080ff; color: white; padding: 16px; font-size: 16px; border: none; } /* Thiết lập vị trí cho thẻ div với class dropdown*/ .dropdown { position: relative; display: inline-block; } /* Nội dung Dropdown */ .noidung_dropdown { /*Ẩn nội dụng các đường dẫn*/ display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Thiết kế style cho các đường dẫn tronng Dropdown */ .noidung_dropdown a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .hienThi{ display:block; }

window.onclick = function(e) { if (!e.target.matches('.nut_dropdown')) { var noiDungDropdown = document.querySelector(".noidung_dropdown"); if (noiDungDropdown.classList.contains('hienThi')) { noiDungDropdown.classList.remove('hienThi'); } } }

<div class="navbar"> <a href="#trangchu">Trang Chủ</a> <a href="#gioithieu">Giới Thiệu</a> <div class="dropdown"> <button class="nut_dropdown"> Dropdown <i class="fa fa-caret-down"></i> </button> <div class="noidung_dropdown"> <a href="#">Đường Dẫn 1</a> <a href="#">Đường Dẫn 2</a> <a href="#">Đường Dẫn 3</a> </div> </div> </div>

/* thanh navigation */ .navbar { overflow: hidden; background-color: #333; font-family: Arial; } /* đường dẫn bên trong navigation */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* thành phần dropdown */ .dropdown { float: left; overflow: hidden; } /* nút dropdown */ .dropdown .nut_dropdown { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* thêm màu background khi nút dropdown khi hover */ .navbar a:hover, .dropdown:hover .nut_dropdown { background-color: #0080ff; } /* Ẩn nội dung dropdown*/ .noidung_dropdown { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* thiết lập style cho đường dẫn bên trong dropdown */ .noidung_dropdown a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* chọn background cho đường dẫn bên trong dropdown khi hover*/ .noidung_dropdown a:hover { background-color: #ddd; } /* Hiển thị nội dung dropdown khi được hover */ .dropdown:hover .noidung_dropdown { display: block; }