15 Dropdown Examples For Website
If you create a menu or navigation that contains too many navigation paths, it will cause the feeling of difficult to read for users and does not display well on small device screens. Hence the dropdown was born to solve the above problem. Its main task is to create a clear coherent structure that helps users have Get a better overview as well as grouping subpaths into one main section to reduce the usable area in the website. To understand more now let’s go to find out together!
How to Create a Dropdown Using HTML CSS
In this section we will make use of the :hover attribute in CSS to create a dropdown for the page. web.
The first step is to create the HTML structure for this conponent through the code below :
<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>Next we will go into setting the style for the div, button and button tags. a in the above HTML structure with the CSS attribute:
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}After setting it up, we will go into creating content display effects through the attribute calculate hover in CSS through the following code:
.noidung_dropdown a:hover {background-color: #ddd;}
.dropdown:hover .noidung_dropdown {display: block;}
.dropdown:hover .nut_dropdown {background-color: #00bfff;}
And the end result will look like the code below:
How to Create Dropdown Using HTML CSS Javascript
One disadvantage of dropdown using hover effect is that its content will be automatically hidden when the user moves. Move the mouse outside the dropdown button. Therefore we will use more Javascript to make it possible for users Click (click) on the dropdown to view the content without fear of being automatically hidden content with the command toggle (switch class for web page elements).
First we will go into creating the HTML structure:
<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>onclick="hamDropdown()" is responsible for calling the function hamDropdown in Javascript when the person clicks the button containing the event. Now we're going to go into styling the elements HTML with CSS:
.nut_dropdown {
background-color: #0080ff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.noidung_dropdown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.hienThi{
display:block;
}Class hienThi will help you to display the content when the user clicks the dropdown button by switching the mode from display: none; to display:block; for dropdown content. And to understand better, see how we implement it on Javascript:
function hamDropdown() {
document.querySelector(".noidung_dropdown").classList.toggle("hienThi");
}And the final result you see below:
Here I will add a code to help you automatically close the content of the dropdown when the person clicks the mouse outside the screen using the window.onclick attribute. To understand better, see the code later:
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');
}
}
}And the result is below:
Combining Dropdown With Navigation
In this section we will go into how to incorporate dropdown into the navigation of the website.
First we’ll go into creating the HTML structure for the navigation:
<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>Now we will set CSS styles for HTML elements as well as dropdowns:
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.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;
}
.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;
}
.noidung_dropdown a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.noidung_dropdown a:hover {
background-color: #ddd;
}
.dropdown:hover .noidung_dropdown {
display: block;
}Dropdown Examples For Website
Jquery Dropdown
Check out the results below!
Dropdown Menu CSS
Check out the results below!
Dropdown Menu Jquery
Check out the results below!
Dropdown Button
Check out the results below!
Dropdown Menu CSS
Check out the results below!
Dropdown Menu HTML
Check out the results below!
Jquery Dropdown Menu
Check out the results below!
CSS Dropdown Dark And Light
Check out the results below!
HTML Dropdown Menu
Check out the results below!
Menu Dropdown By CSS
Check out the results below!
Dropdown Menu HTML5 CSS3
Check out the results below!
Dropdown Button Jquery
Check out the results below!
Vertical Dropdown Menu
Check out the results below!
CSS Dropdown Menu
Check out the results below!
Dropdown Navigation
Check out the results below!
Shopping Cart Dropdown
Check out the results below!
Simple CSS Dropdown
Check out the results below!
Dropdown HTML
Check out the results below!
Filter Dropdown
Check out the results below!
Zigzag dropdown menu
Check out the results below!
CSS3 Menu Dropdown Collection Animation
Check out the results below!
Pure CSS dropdowns
Check out the results below!
Dropdown button HTML
Check out the results below!
CSS-Only Nested Dropdown Navigation
Check out the results below!
HTML dropdown selected
Check out the results below!
Long Drop Down Items
Check out the results below!
Input type select
Check out the results below!
HTML dropdown form
Check out the results below!
Drop Down Menu CSS3 Awesome
Check out the results below!
Dropdown menu html css
Check out the results below!
https://codepen.io/lefourbefromage/pen/rNNzomP
Dropdown select css
Check out the results below!
Drop-down List Effect
Check out the results below!
Dropdown Button CSS
Check out the results below!
Dropdown Input Codepen
Check out the results below!
Card Deck Drop Down
Check out the results below!
Drop Down Button Beautiful
Check out the results below!
Dropdown with search box
Check out the results below!
Onclick Dropdown Menu Example
Check out the results below!
Multi select dropdown Vuejs
Check out the results below!
Summary:
Through this, I hope the article will provide you with useful dropdowns for development and design web And if you have any questions, just send me an email and I will respond as soon as possible. We hope you continue to support the site so that I can write more good articles. Have a nice day!
Related Articles:
