Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create Custom Dropdown Select Menu using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.
A Select Menu is a combination of various options where the user has to choose what they like or need. This type of select menu can be made for infinite purposes for example to choose the gender, favorite food, clothes media, etc.
Let’s have a quick look at the given image of your project [Custom Dropdown Select Menu] on the webpage. As you on the image, at the top side there is a section with text select media and at the bottom section, there are some lists of social media icons with names. Actually, at first, the section of the social media list will be hidden and when we click on the upper select media button then that social media list will appear. When we click on the social media list then its name will appear on the top bottom.
Rather than theoretically, you can watch the real demo of this custom dropdown select menu, and by watching the full video tutorial, you will get the idea of how all HTML CSS, and JavaScript code work behind this project.
Custom Dropdown Select Menu in HTML CSS & JavaScript
I have provided all the HTML CSS and JavaScript code that I have used to create this project [Custom Dropdown Select Menu in HTML CSS & JavaScript]. Before getting into the source code files, I would like to explain the given video tutorial.
As you have seen in the video tutorial of your project [Custom Dropdown Select Menu]. At first, we have seen only a button with the text “Select Media” when I clicked on that button, a social media list appeared with different social media icons and names. When I clicked on every social media list, its name moved to button and the social media list section disappeared. To make the select button and social media list I have used HTML and CSS and to toggle the social media menu list and move that clicked media’s text to the select button, I have used some JavaScript code.
Now, I believe you can build this project [Custom Dropdown Select MenuĀ ] using HTML CSS, and JavaScript. If you are feeling difficulty creating this project, I have provided all the HTML CSS and JavaSCript code below that I have used to create this select menu.
You Might Like This:
Custom Dropdown Select Menu [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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">
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<!--===== Boxicons CSS =====-->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<title>Custom Dropdown Select Menu</title>
</head>
<body>
<div class="select-menu">
<div class="select-btn">
<span class="sBtn-text">Select your option</span>
<i class="bx bx-chevron-down"></i>
</div>
<ul class="options">
<li class="option">
<i class="bx bxl-github" style="color: #171515;"></i>
<span class="option-text">Github</span>
</li>
<li class="option">
<i class="bx bxl-instagram-alt" style="color: #E1306C;"></i>
<span class="option-text">Instagram</span>
</li>
<li class="option">
<i class="bx bxl-linkedin-square" style="color: #0E76A8;"></i>
<span class="option-text">Linkedin</span>
</li>
<li class="option">
<i class="bx bxl-facebook-circle" style="color: #4267B2;"></i>
<span class="option-text">Facebook</span>
</li>
<li class="option">
<i class="bx bxl-twitter" style="color: #1DA1F2;"></i>
<span class="option-text">Twitter</span>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #E3F2FD;
}
.select-menu{
width: 380px;
margin: 140px auto;
}
.select-menu .select-btn{
display: flex;
height: 55px;
background: #fff;
padding: 20px;
font-size: 18px;
font-weight: 400;
border-radius: 8px;
align-items: center;
cursor: pointer;
justify-content: space-between;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.select-btn i{
font-size: 25px;
transition: 0.3s;
}
.select-menu.active .select-btn i{
transform: rotate(-180deg);
}
.select-menu .options{
position: relative;
padding: 20px;
margin-top: 10px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
display: none;
}
.select-menu.active .options{
display: block;
}
.options .option{
display: flex;
height: 55px;
cursor: pointer;
padding: 0 16px;
border-radius: 8px;
align-items: center;
background: #fff;
}
.options .option:hover{
background: #F2F2F2;
}
.option i{
font-size: 25px;
margin-right: 12px;
}
.option .option-text{
font-size: 18px;
color: #333;
}
const optionMenu = document.querySelector(".select-menu"),
selectBtn = optionMenu.querySelector(".select-btn"),
options = optionMenu.querySelectorAll(".option"),
sBtn_text = optionMenu.querySelector(".sBtn-text");
selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));
options.forEach(option =>{
option.addEventListener("click", ()=>{
let selectedOption = option.querySelector(".option-text").innerText;
sBtn_text.innerText = selectedOption;
optionMenu.classList.remove("active");
});
});
If you face any difficulties while creating your Dropdown Select Menu or your code is not working as expected, you can download the source code files for this Select Menu for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
