In this article we going to make custom select dropdown menu using HTML CSS and JavaScript. That let user to select one option from many.
Select dropdown menu is dropdown menu which let user to select a option from many options present in dropdown menu. There is a menu where user can select more than one options. Here I have made custom select dropdown menu which let user to select only one option from many.
In our custom select dropdown menu I have added games name as options. When user click on select your favourite game (see the above image) the dropdown menu appears to show the options (name of games). And when user click on any names or options, that name or option will be selected and dropdown menu hides. So, let’s start making it.
Video Tutorial on Custom Select Menu Using HTML, CSS and JavaScript:
Custom Select Dropdrop Menu.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files with name index.html and index.css
I've integrated JavaScript within the HTML file.
So, let’s make this custom select menu using HTML, CSS and JavaScript step by step.
Step 1: create a basic structure in files.
So first link the css file with html file and add basic structure of HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #f4bfff, #e2e2e2);
position: relative;
}
Ouput:
Step 2: Create select box.
So, let's first create the select box (class="select_box"). By clicking on it, a dropdown menu appears (that we’ll create in the next step) with options.
Inside this select box we'll add p tag(In which we are going to display the selected option) and div tag with class="img" (for images or icon that I have form using CSS, you can use image or icon instead).
HTML
<div class="box">
<div class="select_box">
<p class="select">Select Your Favourite Game</p>
<div class="img"></div>
</div>
</div>
CSS
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
box-shadow: 0px 5px 50px -20px rgb(0 0 0);
}
.box .select_box{
display: flex;
justify-content: space-between;
font-size: 25px;
background-color: #000;
color: #fff;
padding: 15px 20px;
border-radius: 10px;
cursor: pointer;
position: relative;
}
.box .select_box .img{
position: absolute;
top: 15px;
right: 20px;
width: 15px;
height: 15px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
rotate: 45deg;
transition: 0.2s;
}
Output:
Step 3: Create a dropdown option box or menu box.
Now let’s create option box after select box (class="select_box") and add options inside it. We'll set its height: 250px and set overflow-y: auto. And also make a custom scrollbar.
Also read: Create animated dropdown menu that opens with animation. All options appears open one by one.
HTML
<div class="option_box">
<ul class="ul">
<li class="li">Cricket</li>
<li class="li">Volleyball</li>
<li class="li">Football</li>
<li class="li">Basketball</li>
<li class="li">Badminton</li>
<li class="li">Hockey</li>
<li class="li">Tennis</li>
</ul>
</div>
CSS
.box .option_box{
position: relative;
}
.box .option_box ul{
position: absolute;
background-color: #000;
width: 100%;
height: 250px;
margin-top: 10px;
border-radius: 10px;
box-shadow: 0px 15px 50px -20px rgb(0 0 0);
overflow-y: auto;
transition: 0.2s;
}
.box .option_box ul::-webkit-scrollbar{
width: 10px;
}
.box .option_box ul::-webkit-scrollbar-track-piece{
margin: 10px 0px;
background-color: #fff;
border-radius: 20px;
}
.box .option_box ul::-webkit-scrollbar-thumb{
background-color: #bc39e1;
border-radius: 20px;
}
.box .option_box ul li{
list-style: none;
font-size: 22px;
color: #fff;
padding: 8px;
margin: 8px;
border-radius: 5px;
cursor: pointer;
}
.box .option_box ul li:hover{
background-color: #5a5a5a;
}
Output:
Now let’s hide the menu (ul tag class="ul"). Because we only want to show the menu when the user clicks on select box (class="select_box").
Step 4: Hide menu.
So, to hide a menu (class="ul") we just have to make height: 0px from 250px.
CSS
.box .option_box ul{
position: absolute;
background-color: #000;
width: 100%;
height: 0px;
margin-top: 10px;
border-radius: 10px;
box-shadow: 0px 15px 50px -20px rgb(0 0 0);
overflow-y: auto;
transition: 0.2s;
}
Ouput:
As you can see the dropdown menu is hidden.
And to show and hide this menu we are going to add and remove the active class (active). which contain the CSS property to show the dropdown menu (height: 250px). So when this active class is inside the dropdown menu (ul tag) the menu appears. if not then disappears.
We'll add and remove that active class using JavaScript.
But first let's create that active class to show the dropdown menu.
CSS
.box .option_box .active{
height: 250px;
}
But as you can see, we have image also, although I have formed image using CSS. But we want it to rotate according to the dropdown menu open and close.
So, for that also we are going to create another class (with name img_active) in div tag with class value img (class="img"), to rotate it (see below css code).
CSS
.box .select_box .img_active{
rotate: -135deg;
top: 25px;
}
Step 5: Add javascript to show & hide menu.
To show and hide the dropdown menu here we are going to toggle the above created classes using JavaScript (active for ul tag dropdown menu and img_active for img tag).
Means when user clicks on select box if dropdown menu (ul tag) has active class then it will be removed and if it’s already removed or not applied then it will be applied to drop down menu (ul tag).
Likewise if a div tag with class value img has active_img class, then it will be removed and if it is not then it will apply.
By adding and removing the classes the menu appears and disappears like with image (arrow icon) also rotate.
JavaScript
let ul = document.querySelector(".ul");
let li = document.querySelectorAll(".li");
let select = document.querySelector(".select");
let select_box = document.querySelector(".select_box");
let img = document.querySelector(".img");
select_box.onclick = function () {
ul.classList.toggle("active");
img.classList.toggle("img_active");
}
Ouput:
Before click:
After click:
So, as you can see in above image that after click, the menu appears and image rotated.
Step 6: Get the selected value.
After the show and hide menu, let’s show the selected option (li tag innerHTML, which is game names) inside select box (class="select_box"). Means when user click on any option than its innerHTML should appear in p tag of element with select_box class.
JavaScript
li.forEach(li => {
li.onclick = function () {
select.innerHTML = li.innerHTML;
}
});
Now we also have to close menu and rotate image when user done with selecting option (game name).
So again, we toggle the class after selections of game name.
JavaScript
li.forEach(li => {
li.onclick = function () {
select.innerHTML = li.innerHTML;
ul.classList.toggle("active");
img.classList.toggle("img_active");
}
});
Output:
After selecting the option menu automatically closed.
You can see demo in above YouTube video.
You may like:
- How to create an animated dropdown selection menu using HTML, CSS and JavaScript.
- How to create an animation navigation menu using HTML,CSS and JavaScript.
- How to create an list item selection animation using HTML, CSS and JavaScript.
- How to create responsive navigation menu using HTML, CSS and JavaScript.
- How to create an dropdown menu in search bar using HTML, CSS and JavaScript.
- How to create a navigation bar with search bar using HTML, CSS and JavaScript.
Final code:
So that’s how you can make a custom select dropdown menu using html css and Javascript. If you have any question or suggestion you can write in the comment section.
Share your thoughts.