In this article we going to learn how to make custom animated dropdown select menu using HTML CSS and JavaScript. I have already shared custom select menu but that’s a simple one you can check it out.
Custom select menu use to select one option from many given. This menu shows option by dropdown effects with animation.
Here in this post, we going to make custom select menu with animation. I have shown here two animations, when user open the drop-down menu, you can see demo in below video.
When user open menu and click on any of option from many, then that option will get selected.
You’ll Learn in this post:
- How to create custom select menu?
- How to add animation to menus option?
- How to create simple dropdown menu?
- How to add selection functionality to navigation or list item?
Video Tutorial on Custom Animated Select Menu.
Custom Animated Dropdown Select Menu.
How does this custom select dropdown menu function.?
When the user clicks on the select option, a dropdown menu will appear with animation. After that when the user selects any option, it will get selected and the menu closes.
How are we going to make this custom dropdown select menu?
We are going to add open and close dropdown menu functionality with JavaScript by toggling the class.
And there is an arrow that rotates when the dropdown menu closes and opens that we are going to rotate by adding and removing another class according to dropdown menu state of open and closed.
As you can see in the above demo, I have added animations to options, for that I used a forloop of JavaScript with set timeout method.
Now let’s start to make it.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css
I've integrated JavaScript with in the HTML file.
Let’s create custom animated dropdown select menu using HTML CSS and JavaScript step by step:
Step 1: Create a simple dropdown menu.
Create simple dropdown menu design using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Animated Select Menu</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<div class="selected_option">
<p>Select Your Option</p>
<div class="arrow"></div>
</div>
<div class="option_box">
<nav>
<ul>
<li>Mango</li>
<li>Orange</li>
<li>Banana</li>
<li>Guava</li>
<li>Pomegranate</li>
<li>Grapes</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #E91E63, #5C6BC0);
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 400px;
}
.selected_option{
font-size: 30px;
font-weight: bold;
color: #000;
background-color: #fff;
padding: 15px;
border-radius: 10px;
cursor: pointer;
position: relative;
}
.arrow{
position: absolute;
right: 15px;
top: 20px;
width: 15px;
height: 15px;
border-top: 4px solid;
border-left: 4px solid;
rotate: -135deg;
transition: 0.4s;
}
.arrow_active{
top: 25px;
rotate: 45deg;
}
.option_box{
position: relative;
margin-top: 15px;
}
nav{
position: absolute;
width: 100%;
height: 250px;
overflow-y: auto;
background-color: #fff;
border-radius: 10px;
transition: 0.3s;
}
nav ul li{
font-size: 25px;
background-color: #fff;
color: #000;
list-style: none;
padding: 10px 15px;
cursor: pointer;
transition: 0.3s;
}
nav ul li:hover{
background-color: #f2f2f2;
}
nav::-webkit-scrollbar{
width: 10px;
}
nav::-webkit-scrollbar-thumb{
background-color: #5e35b1;
border-radius: 10px;
}
Output:
As you can see, the simple dropdown menu is ready, but we have to show the dropdown menu when the user clicks on select you option (class="selected_option").
CSS
nav{
position: absolute;
width: 100%;
pointer-events: none;
height: 0px;
overflow-y: auto;
background-color: #fff;
border-radius: 10px;
transition: 0.3s;
}
Output:
We'll show the dropdown menu by creating and adding the separate class inside the dropdown menu (nav tag). And also, we have to rotate the arrow (class="arrow") when the dropdown menu opens or closes so for that also we'll create and add a separate class inside the element with class="arrow".
We'll create nav_active class for dropdown menu (nav tag) and for arrow (class="arrow") we'll create arrow_active class
By adding the nav_active class inside the dropdown menu (nav tag), it will be open and by removing this class the dropdown menu will close. We'll toggle this class using JavaScript.
CSS
.arrow_active{
top: 25px;
rotate: 45deg;
}
.nav_active{
height: 250px;
pointer-events: fill;
}
Step 2: Create dropdown menu functionality.
After creating the dropdown menu lets create functionality to open and close this menu on click using JavaScript.
We'll simply toggle the nav_active class inside the nav tag. And based on the presence of nav_active class inside nav tag we'll rotate the arrow up and down by adding and removing the arrow_active class inside the element with class="arrow".
JavaScript
let selected_option = document.querySelector(".selected_option");
let selection = document.querySelector(".selected_option p");
let arrow = document.querySelector(".arrow");
let option_box = document.querySelector("nav");
let options = document.querySelectorAll("nav ul li");
selected_option.addEventListener("click", selection_function);
function selection_function() {
option_box.classList.toggle("nav_active");
if (option_box.classList.contains("nav_active")) {
arrow.classList.add("arrow_active");
// select functionality
} else {
arrow.classList.remove("arrow_active");
}
}
Output:
As you can see, the menu is working. Now lets add functionality to selecting list items.
As you can see above code I have added a comment in code (select functionality) right from below we are going to add code for selection functionality of custom select menu.
Step 3: Create selecting the option functionality.
Now let’s create option selection functionality for the dropdown menu.
You can use foreach method of JavaScript to make this functionality but here we going to use forloop as we also have to add animations to all list items or menu items in drop down menu.
JavaScript
selected_option.addEventListener("click", selection_function);
function selection_function() {
option_box.classList.toggle("nav_active");
if (option_box.classList.contains("nav_active")) {
arrow.classList.add("arrow_active");
// select functionality
for (let i = 0; i < options.length; i++) {
const element = options[i];
element.onclick = function () {
selection.innerHTML = element.innerHTML;
selection_function();
}
}
} else {
arrow.classList.remove("arrow_active");
}
}
Output:
Step 4: Add animation to list items of dropdown menu.
Now let’s add animation to list items of the menu. It's simple, we just have to first make some changes in the initial look (when dropdown menu closes) of list items so let’s change it.
CSS
nav ul li{
font-size: 25px;
background-color: #fff;
color: #000;
list-style: none;
padding: 10px 15px;
cursor: pointer;
transform: scale(0.5);
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
I have just scale list items to half, opacity 0 and pointer events: none when it's hidden initially. When the drop down menu opens, we set all list items to its previous scaling (that is 1), opacity: 1 and pointer events: none.
Then again when user close the menu, we set scale list items to half, opacity 0 and pointer events: none
And we make this happen to all the list items one by one by setting the timeout method of JavaScript in for loop. see below code.
JavaScript
selected_option.addEventListener("click", selection_function);
function selection_function() {
option_box.classList.toggle("nav_active");
if (option_box.classList.contains("nav_active")) {
arrow.classList.add("arrow_active");
for (let i = 0; i < options.length; i++) {
const element = options[i];
// select functionality
element.onclick = function () {
selection.innerHTML = element.innerHTML;
selection_function();
}
setTimeout(() => {
element.style.transform = "scale(1)";
element.style.opacity = "1";
element.style.pointerEvents = "fill";
}, i * 100);
}
} else {
arrow.classList.remove("arrow_active");
for (let i = 0; i < options.length; i++) {
const element = options[i];
setTimeout(() => {
element.style.transform = "scale(0.5)";
element.style.opacity = "0";
element.style.pointerEvents = "none";
}, i * 100);
}
}
}
You can see demo in above YouTube video.
You can also add another animation by removing drop down menu background colour and height. (demo and tutorial available in above YouTube video).
Like wise you can add more animations to it.
You may like:
- Simple custom select dropdown menu using HTML CSS and JavaScript.
- Responsive navigation menu using HTML CSS and JavaScript.
- How to create an animated navigation animation using HTML, CSS and JavaScript.
- How to create a multi drop down menu using HTML & CSS.
Final code:
So that’s how you can create custom animated dropdown select menu using HTML CSS and JavaScript. If you have any query or suggestion you can write in comment section.
Share your thoughts.