Create drop down list HTML

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

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:

<divclass=”dropdown”>
<buttonclass=”nut_dropdown”>Dropdown</button>
<divclass=”noidung_dropdown”>
<ahref=”#”>ĐườngDẫn1</a>
<ahref=”#”>ĐườngDẫn2</a>
<ahref=”#”>ĐườngDẫn3</a>
</div>
</div>
DropdownĐườngDẫn1ĐườngDẫn2ĐườngDẫn3

Tiếp Theo chúng ta sẽ đi vào thiết lập style cho các thẻ div, button và a trong cấu trúc HTML trên bằng thuộc tính CSS nhé:

/*NútDropdown*/
.nut_dropdown{
background-color:#0080ff;
color:white;
padding:16px;
font-size:16px;
border:none;
}
/*Thiếtlậpvịtríchothẻdivvớiclassdropdown*/
.dropdown{
position:relative;
display:inline-block;
}
/*NộidungDropdown*/
.noidung_dropdown{
/*Ẩnnộidungcácđườngdẫn*/
display:none;
position:absolute;
background-color:#f1f1f1;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
z-index:1;
}
/*ThiếtkếstylechocácđườngdẫntrongDropdown*/
.noidung_dropdowna{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
}

/*NútDropdown*/.nut_dropdown{background-color:#0080ff;color:white;padding:16px;font-size:16px;border:none;/*Thiếtlậpvịtríchothẻdivvớiclassdropdown*/.dropdown{position:relative;display:inline-block;/*NộidungDropdown*/.noidung_dropdown{/*Ẩnnộidungcácđườngdẫn*/display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0px8px16px0pxrgba(0,0,0,0.2);z-index:1;/*ThiếtkếstylechocácđườngdẫntrongDropdown*/.noidung_dropdowna{color:black;padding:12px16px;text-decoration:none;display:block;

Sau khi đã thiết lập xong thì chúng ta sẽ đi vào tạo hiệu ứng hiển thị nội dung thông qua thuộc tính hover trong CSS thông qua đoạn code dưới đây nhé:

/* 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;}

/* 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;}

Và kết quả cuối cùng sẽ như đoạn mã bên dưới nhé:

See the Pen Cách Tạo Dropdown Bằng HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

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

Một điểm bất lợi của dropdown sử dụng hiệu ứng hover là nội dung của nó sẽ tự động ẩn đi khi người dùng di chuyển chuột ra ngoài nút dropdown. Do đó chúng ta sẽ sử dụng thêm Javascript để giúp người dùng có thể nhấn(click) vào dropdown để xem nội dung mà không sợ bị tự động ẩn nội dung bằng lệnh toggle (chuyển đổi class cho các phần tử trong trang web).

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML nhé:

<divclass=”dropdown”>
<button onclick=”hamDropdown()” class=”nut_dropdown”>Dropdown</button>
<divclass=”noidung_dropdown”>
<ahref=”#”>ĐườngDẫn1</a>
<ahref=”#”>ĐườngDẫn2</a>
<ahref=”#”>ĐườngDẫn3</a>
</div>
</div>
ĐườngDẫn1ĐườngDẫn2ĐườngDẫn3

onclick=”hamDropdown()” có nhiệm vụ sẽ gọi hàm hamDropdown trong Javascript khi người click vào nút chứa sự kiện. Bây giờ chúng ta sẽ đi vào thiết lập style cho các thành phần HTML bằng CSS nhé:

/*NútDropdown*/
.nut_dropdown{
background-color:#0080ff;
color:white;
padding:16px;
font-size:16px;
border:none;
}
/*Thiếtlậpvịtríchothẻdivvớiclassdropdown*/
.dropdown{
position:relative;
display:inline-block;
}
/*NộidungDropdown*/
.noidung_dropdown{
/*Ẩnnộidụngcácđườngdẫn*/
display:none;
position:absolute;
background-color:#f1f1f1;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
z-index:1;
}
/*ThiếtkếstylechocácđườngdẫntronngDropdown*/
.noidung_dropdowna{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
}
.hienThi{
display:block;
}

/*NútDropdown*/.nut_dropdown{background-color:#0080ff;color:white;padding:16px;font-size:16px;border:none;/*Thiếtlậpvịtríchothẻdivvớiclassdropdown*/.dropdown{position:relative;display:inline-block;/*NộidungDropdown*/.noidung_dropdown{/*Ẩnnộidụngcácđườngdẫn*/display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0px8px16px0pxrgba(0,0,0,0.2);z-index:1;/*ThiếtkếstylechocácđườngdẫntronngDropdown*/.noidung_dropdowna{color:black;padding:12px16px;text-decoration:none;display:block;.hienThi{display:block;

Class hienThi sẽ giúp bạn hiển thị nội dung khi người dùng nhấn vào nút dropdown bằng cách chuyển chế độ từ display: none; sang display:block; cho nội dung dropdown. Và để hiểu rõ hơn bạn xem cách chúng ta triển khai trên Javascript nhé:

functionhamDropdown(){
document.querySelector(“.noidung_dropdown”).classList.toggle(“hienThi”);
}

functionhamDropdown(){document.querySelector(“.noidung_dropdown”).classList.toggle(“hienThi”);

Và kết quả cuối cùng bạn xem ở bên dưới nhé:

See the Pen Cách Tạo Dropdown Bằng HTML CSS Javascript by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình sẽ bổ sung thêm một đoạn mã giúp bạn có thể tự động đóng nội dung của dropdown khi người click chuột ở ngoài màn hình bằng thuộc tính window.onclick. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

window.onclick=function(e){
if(!e.target.matches(‘.nut_dropdown’)){
varnoiDungDropdown=document.querySelector(“.noidung_dropdown”);
if(noiDungDropdown.classList.contains(‘hienThi’)){
noiDungDropdown.classList.remove(‘hienThi’);
}
}
}

window.onclick=function(e){if(!e.target.matches(‘.nut_dropdown’)){varnoiDungDropdown=document.querySelector(“.noidung_dropdown”);if(noiDungDropdown.classList.contains(‘hienThi’)){noiDungDropdown.classList.remove(‘hienThi’);

Và kết quả ở dưới đây nhé:

See the Pen Cách Tạo Dropdown Bằng HTML CSS Javascript2 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Kết Hợp Dropdown Với Navigation

Phần này chúng ta sẽ cùng nhau đi vào tìm hiểu cách kết hợp dropdown vào trong navigation của trang web nhé!
Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho navigation:

<divclass=”navbar”>
<ahref=”#trangchu”>TrangChủ</a>
<ahref=”#gioithieu”>GiớiThiệu</a>
<divclass=”dropdown”>
<buttonclass=”nut_dropdown”>
Dropdown <iclass=”fafa-caret-down”></i>
</button>
<divclass=”noidung_dropdown”>
<ahref=”#”>ĐườngDẫn1</a>
<ahref=”#”>ĐườngDẫn2</a>
<ahref=”#”>ĐườngDẫn3</a>
</div>
</div>
</div>
TrangChủGiớiThiệuDropdown ĐườngDẫn1ĐườngDẫn2ĐườngDẫn3

Bây giờ chúng ta sẽ thiết lập style CSS cho các phần tử HTML cũng như dropdown nhé:

/*thanhnavigation*/
.navbar{
overflow:hidden;
background-color:#333;
font-family:Arial;
}
/*đườngdẫnbêntrongnavigation*/
.navbara{
float:left;
font-size:16px;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
/*thànhphầndropdown*/
.dropdown{
float:left;
overflow:hidden;
}
/*nútdropdown*/
.dropdown.nut_dropdown{
font-size:16px;
border:none;
outline:none;
color:white;
padding:14px16px;
background-color:inherit;
font-family:inherit;
margin:0;
}
/*thêmmàubackgroundkhinútdropdownkhihover*/
.navbara:hover,.dropdown:hover.nut_dropdown{
background-color:#0080ff;
}
/*Ẩnnộidungdropdown*/
.noidung_dropdown{
display:none;
position:absolute;
background-color:#f9f9f9;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
z-index:1;
}
/*thiếtlậpstylechođườngdẫnbêntrongdropdown*/
.noidung_dropdowna{
float:none;
color:black;
padding:12px16px;
text-decoration:none;
display:block;
text-align:left;
}
/*chọnbackgroundchođườngdẫnbêntrongdropdownkhihover*/
.noidung_dropdowna:hover{
background-color:#ddd;
}
/*Hiểnthịnộidungdropdownkhiđượchover*/
.dropdown:hover.noidung_dropdown{
display:block;
}

/*thanhnavigation*/.navbar{overflow:hidden;background-color:#333;font-family:Arial;/*đườngdẫnbêntrongnavigation*/.navbara{float:left;font-size:16px;color:white;text-align:center;padding:14px16px;text-decoration:none;/*thànhphầndropdown*/.dropdown{float:left;overflow:hidden;/*nútdropdown*/.dropdown.nut_dropdown{font-size:16px;border:none;outline:none;color:white;padding:14px16px;background-color:inherit;font-family:inherit;margin:0;/*thêmmàubackgroundkhinútdropdownkhihover*/.navbara:hover,.dropdown:hover.nut_dropdown{background-color:#0080ff;/*Ẩnnộidungdropdown*/.noidung_dropdown{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0px8px16px0pxrgba(0,0,0,0.2);z-index:1;/*thiếtlậpstylechođườngdẫnbêntrongdropdown*/.noidung_dropdowna{float:none;color:black;padding:12px16px;text-decoration:none;display:block;text-align:left;/*chọnbackgroundchođườngdẫnbêntrongdropdownkhihover*/.noidung_dropdowna:hover{background-color:#ddd;/*Hiểnthịnộidungdropdownkhiđượchover*/.dropdown:hover.noidung_dropdown{display:block;

Và kết quả bạn xem ở bên dưới nhé:

See the Pen dropdown với navigation by haycuoilennao19 (@haycuoilennao19) on CodePen.

Các Ví Dụ Dropdown Khác Cho Website

Phần dưới đây chúng ta sẽ cùng nhau đi vào tìm hiểu các ví dụ dropdown khác nhé!

Thiết Kế Jquery Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Smooth Accordion Dropdown Menu by fainder (@fainder) on CodePen.

Nguồn

Thiết Kế Dropdown Menu CSS

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Simple CSS only dropdown menu by Mads Håkansson (@madshaakansson) on CodePen.

Nguồn

Thiết Kế Dropdown Menu Jquery

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Drop-Down Menu by Scott Marshall (@ScottMarshall) on CodePen.

Nguồn

Cách Tạo Dropdown Button

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Dropdown menu interaction by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Thiết Lập Dropdown Menu CSS

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Animated Dropdown Menu by Amber Weinberg (@amberweinberg) on CodePen.

Nguồn

Cách Tạo Dropdown Menu HTML

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Dropdown Menu Animation by Dany Santos (@THEORLAN2) on CodePen.

Nguồn

Cách Tạo Jquery Dropdown Menu

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Dropdown Menu jQuery by naymapl (@Naymapl) on CodePen.

Nguồn

Cách Tạo CSS Dropdown Dark Và Light

Kết quả bạn xem bên dưới nhé!

See the Pen Dropdown dark/light – pure css – #14 by Ivan Grozdic (@ig_design) on CodePen.

Nguồn

Thiết Kế HTML Dropdown Menu

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Gooey Dropdown Menu by Mark Eriksson (@Markshall) on CodePen.

Nguồn

Tạo Menu Dropdown Bằng CSS

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.

Nguồn

Tạo Dropdown Menu HTML5 CSS3

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen 3d nested navigation by Devilish Alchemist (@devilishalchemist) on CodePen.

Nguồn

Tạo Dropdown Button Jquery

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Interactive Dropdown Menu by Josh Boothman (@josh_boothman) on CodePen.

Nguồn

Thiết Lập Vertical Dropdown Menu

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Vertical Dropdown Menu by Bülent Sakarya (@bulentsakarya) on CodePen.

Nguồn

Cách Tạo CSS Dropdown Menu

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Simple PureCss dropdown menu with following subnav by Robert Borghesi (@dghez) on CodePen.

Nguồn

Xây Dựng Dropdown Navigation

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Pure Css dropdown menu by Sathish kumar (@sathishlxg) on CodePen.

Nguồn

Shopping Cart Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Shopping Cart Dropdown by Andre Madarang (@drehimself) on CodePen.

Nguồn

Simple CSS Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Navbar by Mustafa Omar (@themustafaomar) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Pretty Select dropdown by j0be (@j0be) on CodePen.

Nguồn

Filter Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen CSS styled and filterable select dropdown by Mari Johannessen (@marijoha) on CodePen.

Nguồn

Zigzag dropdown menu

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Zigzag dropdown menu concept by Catalin Rosu (@catalinred) on CodePen.

Nguồn

CSS3 Menu Dropdown Collection Animation

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen CSS3 Menu Dropdowns by Colin (@cmcg) on CodePen.

Nguồn

Pure CSS dropdowns

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen EXPERIMENTAL: Pure CSS dropdowns with single and multiple select by Explosion AI (@explosion) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Simple Dropdown by Dianatomic (@Dianatomic) on CodePen.

Nguồn

CSS-Only Nested Dropdown Navigation

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen CSS-Only Nested Dropdown Navigation by Gabrielle Wee (@gabriellewee) on CodePen.

Nguồn

HTML dropdown selected

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Dropdown by Rafael González (@rgg) on CodePen.

Nguồn

Long Drop Down Items

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.

Nguồn

Input type select

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.

Nguồn

HTML dropdown form

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Custom select menu by Husam Alrubaye (@husamui) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Drop Down Menu CSS3 Awesome by Virlyz ID (@samsurysites) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Daily Ui #07 – Dropdowns by LeFourbeFromage (@lefourbefromage) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Select dropdown (Light & Dark) by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Drop-down List Effect by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Morphing tab button with list by Colin Horn (@colinhorn) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Dropp by Paulo Nunes (@syndicatefx) on CodePen.

Nguồn

Card Deck Drop Down

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen CSS3 Card Deck Drop Down by Brady Sammons (@soulrider911) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Dropdown buttons by Paul (@peiche) on CodePen.

Nguồn

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen pure css jquery dropdown with search by Saravanan (@saravanajd) on CodePen.

Nguồn

Onclick Dropdown Menu Example

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Dropdown Inspired from DigitalOcean by Asyraf Hussin (@AsyrafHussin) on CodePen.

Nguồn

Multi select dropdown Vuejs

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Vue.js – Multi-select custom searchable dropdown with custom checkboxes by Dejan Babić (@microfront) on CodePen.

Nguồn

React Dropdown Menu

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen React Dropdown Menu by Mikkel Laursen (@mlaursen03) on CodePen.

Nguồn

React Dropdown Slide

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen React Dropdown Slide by RazorX (@RazorXio) on CodePen.

Nguồn

React Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen React Dropdown – No Window Listener by Maxime Preaux (@deammer) on CodePen.

Nguồn

Simple React Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen React Dropdown Menu by Taylor Harwood (@taylorharwood) on CodePen.

Nguồn

Vue Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Vue Dropdown by Jorge Nieto (@jnieto) on CodePen.

Nguồn

Vuejs Tailwind Animated Dropdown

Create drop down list HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Vuejs + Tailwind animated dropdown by Djordje (@dzoni404) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những dropdown hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

mtoplist