Free Coding Ebook 👉 Get Now
Custom dropdown Menu Using Html and Css
Welcome to the Codewithrandom blog. In this Today blog, we are going create a Custom dropdown Menu Using Html and Css. We create 3 types of Custom dropdown Menus you can choose any dropdown Menu for your project and create it using only Pure Css.
I hope you enjoy our blog so let’s start with a basic html structure for the Custom dropdown Menu.
50+ HTML, CSS and JavaScript Projects With Source Code
Live Preview Of Custom Dropdown Menu Using Css
Code by | Silver Drop |
Project Download | Link Available Below |
Language used | HTML and CSS |
External link / Dependencies | NO |
Responsive | YES |
HTML Code For Custom Dropdown Menu
<!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 dropdown Menu. Now, you can see output without styling then we write Css code for Custom Dropdown Menu.
Gym Website Using HTML and CSS With Source Code
Output
CSS Code For Custom Dropdown Menu
/* 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); }Now we completed our Css code for Dropdown Menu. This is the Final Output Of the Custom Dropdown Menu Using Html and Css
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
NOTE:-JavaScript code is optional because we add javascript code for changing the color of the Custom Dropdown Menu in 1 Click. so if you need only Any 1 color Dropdown Menu then I suggest not adding JavaScript code.
JavaScript Code
/* 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}); }); }); /* * Original version at * http://red-team-design.com/making-html-dropdowns-not-suck */
Custom Color Dropdown Menu
Hope 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!
Written by – Code With Random/Anki
Code By – Silver Drop
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!