custom dropdown menu css

Custom Dropdown Menu Using Html and Css

Custom dropdown Menu Using Html and Css

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.

Live Preview Of Custom Dropdown Menu Using Css

Code bySilver Drop
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNO
ResponsiveYES
 50+ HTML, CSS and JavaScript Projects With Source Code

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 CodeOutput
Custom Dropdown Menu Using Html and Css

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)
Custom Dropdown Menu Using Html and Css
Custom Dropdown Menu Using Html and Css

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

Custom Dropdown Menu Using Html and Css
 
Custom Dropdown Menu Using Html and Css
 
Custom Dropdown Menu Using Html and Css
 
 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/AnkiCode 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!



Tags: , ,

Leave a Reply