CSS Dropdown
Dropdowns play a very important role in making our website interactive. A Dropdown is a menu that contains a list of items. This list of items appears whenever a user clicks or hovers the cursor over the dropdown button, and the user has to choose the one value from the dropdown list.
The dropdown menu offers two states: active and inactive. In an inactive state, only a single list item appears while in the active state, all the items that are present in a dropdown menu are visible and users have to choose one among them. When the user selects the value the control goes back to the inactive state and displays only the selected item.
Let's understand better with the help of examples.
Example: Create CSS Dropdown
In the given example we are going to create a dropdown. So, we have created a dropdown button using the <button> tag and placed it within the <div> element which is a parent element.
For the dropdown items, we have added another <div> element after the dropdown button. The second <div> element act as a parent element for the dropdown items. We will create dropdown items inside this <div> using anchor tag <a>.
The HTML code of the Dropdown menu is given below:
<!DOCTYPE html>
<html>
<head>
<title>CSS Dropdown</title>
</head>
<body>
<div class="dropdown">
<button class="dropdown_btn">Dropdown</button>
<div class="dropdown_item">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</body>
</html>
We have to apply the CSS code to provide the styling and provide the proper positioning to the dropdown button and its items.
- Here the
position: relative; property is specified for the .dropdown class to place the dropdown items right below the dropdown button.
- The dropdown items that are hidden by default are styled by applying all the CSS properties within the
.dropdown_item class.
- The
:hover property is used to display the dropdown menu when the user moves the cursor over the dropdown button.
// CSS Code
.dropdown_btn {
background-color:#f25e13;
color: white;
padding: 16px;
height: 55px;
width: 160px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_item {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown_item a {
color: black;
padding: 12px 16px;
text-align: center;
text-decoration: none;
display: block;
}
.dropdown_item a:hover {background-color: #f25e13;
color: white;
}
.dropdown:hover .dropdown_item {
display: block;
}
.dropdown:hover .dropdown_btn {
background-color: #f25e13;
}
Output:
Right-aligned Dropdown Menu in CSS
By default, the position of the dropdown is the top-left. So whenever we will create a dropdown button and we will not specify the position then by default it will locate itself to the top left corner of the parent element. Let's learn how to create a dropdown that is placed at the right of the parent element with the help of an example.
Example: Create Right-aligned Dropdown Menu in CSS
In this example, we have created a right-aligned dropdown. The steps of creating the right-aligned dropdown button are the same as the previous one. We just have added one more CSS property float with value right. This property floats the dropdown button to the right of the web page.
// HTML Code
<!DOCTYPE html>
<html>
<head>
<title>CSS Dropdown</title>
</head>
<body>
<div class="dropdown" style="float:right;">
<button class="dropdown_btn">Right</button>
<div class="dropdown_item" style="left:0;">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</body>
</html>
// CSS Code
.dropdown_btn {
background-color:#f25e13;
color: white;
padding: 16px;
height: 55px;
width: 160px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_item {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown_item a {
color: black;
padding: 12px 16px;
text-align: center;
text-decoration: none;
display: block;
}
.dropdown_item a:hover {background-color: #f25e13;
color: white;
}
.dropdown:hover .dropdown_item {
display: block;
}
.dropdown:hover .dropdown_btn {
background-color: #f25e13;
}
Output:
Dropdown Navbar
The Navigation Bar or Navbar is a navigation header that is always placed at the top of the webpage. The navigation bar consists of the navigation menus, which allows the user to access different pages of the website by just clicking on the menu items of the navbar. It might also possible that some menus have their sub-menu. So we can create the sub-menus using the dropdown and add similar sub-menus to any menu items easily.
Here is the example of the navbar dropdown given below.
HTML: In the given example, we have added the <div> element along with the class .navbar to create a navbar menu.
The dropdown button is created by using the <button> element.
Again, the <div> element is used as a container element for creating the dropdown submenu items. This <div> element is also used to provide the proper alignment and positioning to the dropdown sub-menus.
CSS: We provide the background color to the navbar, nav-items, and dropdown buttons using the CSS background-color property. The space between the border of the navbar and the nav items is increased by specifying the CSS padding property.
The .dropdown_menu class contains the actual dropdown menu. This menu is hidden by default and can be visible when the user moves the cursor over the dropdown button. This can be done by applying :hover property. We have also specified the box-shadow property which is used to make the dropdown menu look similar to cards and the z-index property which is used to put the dropdown in front of other elements.
Conclusion
In this lesson, we have learned about dropdowns, how to create them using CSS and how to add submenus to them. Also, we have how to create a right-aligned dropdown and navbar with a dropdown menu.
