A useful and space-saving way for visitors to access a variety of options, dropdown menus are an essential component of web design. This thorough tutorial will cover the principles of dropdown menus, their significance in web design, and how to improve their usability and appearance using CSS pseudo-elements::before and ::after.
Understanding Dropdown Menus
Dropdown menus, sometimes referred to as drop-down menus, are interactive components that are frequently seen in user interfaces. Usually, they are made up of a parent element, such a button or link, that, when clicked, exposes a concealed list of options. These choices may consist of form choices, navigational links, or other interactive components.
Enhancing Dropdowns with CSS Pseudo-elements
output:
While dropdown menus are a common feature in web design, their appearance and behaviour can be improved with CSS pseudo-elements::after and::before. These sophisticated tools enable designers to alter dropdown menus without cluttering the HTML syntax, allowing for a variety of creative possibilities.(Read more)
Let’s examine an example 1 : to see how CSS pseudo-elements can be used to create a Basic-level dropdown menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<style>
body {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.dropdown {
position: relative;
/* Make the dropdown container the reference point */
width: 200px;
display: inline-block;
}
.dropdown-toggle {
padding: 20px 15px;
border: none;
background-color: #008CBA;
cursor: pointer;
width: 100%;
color: white;
font-size: 16px;
font-weight: 400;
}
.dropdown-menu {
display: none;
/* Hide the menu initially */
position: absolute;
left: 0;
background-color: #ffffff;
list-style: none;
padding: 0;
width: 100%;
margin: 0;
padding: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-menu li {
display: block;
}
.dropdown-menu li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 14px;
}
/* Change color of dropdown links on hover */
.dropdown-menu li a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-menu {
/* Show the menu on hover */
display: block;
}
/* Dropdown arrow using ::after */
.dropdown-toggle:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
/* Center the arrow vertically */
border-style: solid;
border-color: #ffffff transparent transparent transparent;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-toggle">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>
In this example, we have a Basic-level dropdown menu .
Read - multi-level dropdown menu
Why Use Dropdown Menus?
Dropdown menus offer several advantages that make them a popular choice in web design:
Space Efficiency
Dropdown menus save screen space by hiding items until they are required, making them perfect for websites with limited space or complex navigation structures.
Organizational Hierarchy
Designers can use dropdown menus to organize material hierarchically, allowing visitors to dig down into certain categories or sections without overwhelming them with too much information at once.
User Control
Users can customize their browsing experience with dropdown menus, which save up interface space while giving them access to more options and information when needed.
Consistency
Dropdown menus provide a consistent interface pattern that consumers are accustomed with, resulting in a more intuitive and predictable user experience across multiple websites and applications.
Top comments (0)