Basic Dropdown
The development of a dropdown box that displays when the user hovers over an element is demonstrated in the simple dropdown example. CSS is used for style, and HTML is used for the dropdown menu in the structure.
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentClass {
position: relative;
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 200px;
}
.childClass {
top: 0;
left: 0;
opacity: 0.7;
width: 200px;
height: 150px;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<div class="parentClass">
<div class="childClass">
<h2>Element 2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>
Output:
Example 3:
In this instance, a pair of subordinate elements are positioned one above the other relative to the main element. Each subordinate element possesses its unique positioning attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parentClass {
position: relative;
background: cyan;
width: 80vw;
margin: 8vw 10vw;
height: 200px;
}
.childClass {
opacity: 0.8;
height: 150px;
width: 190px;
background: yellow;
position: absolute;
top: 0;
}
.child1 {
left: 0;
}
.child2 {
left: 155px;
}
</style>
</head>
<body>
<div class="parentClass">
<div class="childClass child1">
<h2>Element 1.1</h2>
<p>position: absolute;</p>
</div>
<div class="childClass child2">
<h2>Element 1.2</h2>
<p>position: absolute;</p>
</div>
</div>
</body>
</html>
Output:
Dropdown Menu
The dropdown menu illustration builds upon the fundamental dropdown by integrating hyperlinks within the dropdown container. It discusses customizing the dropdown button, links, and the hover effect across the entire menu.
Example:
Styling the Dropdown Button and Content:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change the color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
Output:
Right-aligned Dropdown Content:
.dropdown-content {
right: 0;
}
Dropdown Styling Techniques
This part explores further into CSS styling methods for dropdown menus and offers more illustrations to demonstrate the flexibility of dropdown layouts.
Example 1:
Styling the Appearance of the Dropdown Box:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
select {
appearance: none;
outline: 0;
background: green;
background-image: none;
width: 100%;
height: 100%;
color: black;
cursor: pointer;
border: 1px solid black;
border-radius: 3px;
}
.select {
position: relative;
display: block;
width: 15em;
height: 2em;
line-height: 3;
overflow: hidden;
border-radius: .25em;
padding-bottom: 10px;
}
</style>
</head>
<body>
<center>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option value="1">Operating System</option>
<option value="2">Computer Networks</option>
<option value="3">Data Structure</option>
<option value="4">Algorithm</option>
<option value="5">C programming</option>
<option value="6">JAVA</option>
</select>
</div>
</center>
</body>
</html>
Output:
Example 2:
Browser-Specific Styling and Transitions:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: green;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
background: green;
background-image: none;
border: 1px solid black;
}
.select {
position: relative;
display: block;
width: 20em;
height: 3em;
line-height: 3;
background: #2C3E50;
overflow: hidden;
border-radius: .25em;
}
select {
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
color: #fff;
cursor: pointer;
transition: background-color 0.25s ease;
}
select::-ms-expand {
display: none;
}
.select::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 0 1em;
background: #34495E;
pointer-events: none;
transition: color 0.25s ease;
}
.select:hover::after {
color: #F39C12;
}
</style>
</head>
<body>
<center>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option value="1">Operating System</option>
<option value="2">Computer Networks</option>
<option value="3">Data Structure</option>
<option value="4">Algorithm</option>
<option value="5">C programming</option>
<option value="6">JAVA</option>
</select>
</div>
</center>
</body>
</html>
Output:
Conclusion
Proficiency in CSS dropdown styling is essential for web developers. Whether it's a sophisticated dropdown menu or a basic one, they can be easily customized for a seamless and stylish user experience.
Developers have the opportunity to utilize the provided samples as a foundation for delving into and innovating with dropdown layout. Since CSS continues to be a core technology in the realm of web development, gaining proficiency in these design methods plays a significant role in crafting interactive and intuitive user interfaces.