Custom dropdown Menu | Create Html Dropdown Menu

Custom dropdown Menu | Create Html Dropdown Menu

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Custom dropdown Menu. We use HTML, Css, and javascript for the A Custom dropdown Menu. I hope you enjoy our blog so let’s start with a basic HTML structure for the Custom dropdown Menu. 

HTML Code

Table of Contents

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>HTML dropdownsl</title>
</head>
<body>
<h2>Making HTML dropdowns not suck</h2>
<span class="color-picker"></span>
<br/><br/>
<span class="custom-dropdown big">
<select>
<option>Sherlock Holmes</option>
<option>The Great Gatsby</option>
<option>V for Vendetta</option>
<option>The Wolf of Wallstreet</option>
<option>Quantum of Solace</option>
</select>
</span>
<span class="custom-dropdown">
<select>
<option>Sherlock Holmes</option>
<option>The Great Gatsby</option>
<option>V for Vendetta</option>
<option>The Wolf of Wallstreet</option>
<option>Quantum of Solace</option>
</select>
</span>
<span class="custom-dropdown small">
<select>
<option>Sherlock Holmes</option>
<option>The Great Gatsby</option>
<option>V for Vendetta</option>
<option>The Wolf of Wallstreet</option>
<option>Quantum of Solace</option>
</select>
</span>
<br/>
<span class="custom-dropdown big">
<select disabled>
<option>Sherlock Holmes</option>
<option>The Great Gatsby</option>
<option>V for Vendetta</option>
<option>The Wolf of Wallstreet</option>
<option>Quantum of Solace</option>
</select>
</span>
<span class="custom-dropdown">
<select disabled>
<option>Sherlock Holmes</option>
<option>The Great Gatsby</option>
<option>V for Vendetta</option>
<option>The Wolf of Wallstreet</option>
<option>Quantum of Solace</option>
</select>
</span>
<span class="custom-dropdown small">
<select disabled>
<option>Sherlock Holmes</option>
<option>The Great Gatsby</option>
<option>V for Vendetta</option>
<option>The Wolf of Wallstreet</option>
<option>Quantum of Solace</option>
</select>
</span>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1/prototype.js"></script>
<script src="script.js"></script>
</body>
</html>

There is all the HTML code for the Custom dropdown Menu. Now, you can see an output with a Custom dropdown Menu then we write javascript for the Custom dropdown Menu.

output

CSS code

 /* CodePen demo */  
body {
background: #2a2a2b;
color: #fff;
text-align: center;
font-family: Arial, Helvetica;
}
.big {
font-size: 1.2em;
}
.small {
font-size: .7em;
}
.square {
width: .7em;
height: .7em;
margin: .5em;
display: inline-block;
}
/* Custom dropdown */
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 10px; /* demo only */
}
.custom-dropdown select {
background-color: #1abc9c;
color: #fff;
font-size: inherit;
padding: .5em;
padding-right: 2.5em;
border: 0;
margin: 0;
border-radius: 3px;
text-indent: 0.01px;
text-overflow: '';
-webkit-appearance: button; /* hide default arrow in chrome OSX */
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after { /* Custom dropdown arrow */
content: "25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%;
margin-top: -.5em;
}
.custom-dropdown::before { /* Custom dropdown arrow cover */
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.custom-dropdown select[disabled] {
color: rgba(0,0,0,.3);
}
.custom-dropdown select[disabled]::after {
color: rgba(0,0,0,.1);
}
.custom-dropdown::before {
background-color: rgba(0,0,0,.15);
}
.custom-dropdown::after {
color: rgba(0,0,0,.4);
}

Css Updated output

 /* JS for demo only */  
var colors = ['1abc9c', '2c3e50', '2980b9', '7f8c8d', 'f1c40f', 'd35400', '27ae60'];
colors.each(function (color) {
$$('.color-picker')[0].insert(
'<div class="square" style="background: #' + color + '"></div>'
);
});
$$('.color-picker')[0].on('click', '.square', function(event, square) {
background = square.getStyle('background');
$$('.custom-dropdown select').each(function (dropdown) {
dropdown.setStyle({'background' : background});
});
});

Final output


Now that we have completed our javascript section, our updated output with javascriptHope you like the Custom dropdown Menu. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

This post teaches us how to create a Custom dropdown Menu using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code By – Silver Drop
Check out more…..

Leave a Reply