Navigating through options has never been easier, but the power of HTML has made dropdown lists even easier. A drop-down list created using HTML, CSS, and JavaScript is the most useful feature of any website. It allows the user to easily access all of the website’s content with a few clicks. A drop-down list contains a number of similar options from which to choose, allowing the user to select the best solutions based on their needs.
A good developer would always try to include this functionality on their website in order to deliver a nice user experience. So knowing how to make a nice dropdown would be beneficial for novices in helping them better grasp the importance of adding a dropdown list to websites.
We’ll learn how to make a drop-down list in today’s blog. The drop-down menu will be created from scratch. We will additionally provide you with the project’s whole source code so that if you get stuck in the middle, you can refer to it. We are going to provide you with a download source code button at the end of the blog. Let us now look at our project.
As you can see, the project is simple but effective for the client. We will construct a drop-down list from which to choose. This will be a project for absolute beginners. We will build the project step by step to make it easier for novices to grasp. Before we begin our project, we need to be aware of drop-down lists.
What is a DropDown List?
A dropdown list is a user interface in which a list of several choices is offered under a list to select from, and the user must select one choice based on their needs.
Eg: Most travel websites offer a drop-down menu from which clients can select a place.
Why should you use a Drop Down List?
There are various benefits of using a drop-down list:
- Provide a user interface
- Helps in selecting the best option.
- Mobile friendly.
- Space Saver.
Creating Dropdown List :
Step1: Creating the Structure for our DropDown (HTML)
<form action="#">
<div class="custom-select">
<label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label>
<select id="select-choice1" class="select">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
</form>A basic structure for our drop-down list will be created using the form tag, which we will use to create the main frame. Then, using the div tag, we will create the frame for our drop-down menu inside our div section using the select>, which we will use to create a list of options with a list of choices inside it.
We’ve added all of the necessary code to create the structure of our dropdown list, so let’s look at the results.
Output:
Step2: Adding Styling (CSS)
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600);
body {
background: #1c5570;
color: #ffffff;
font:400 .9em/1.9 'Open Sans', Calibri, Helvetica, Arial, sans-serif;
}
.custom-select {
position : relative;
width: 100%;
max-width: 25em;
margin: 4em auto;
cursor: pointer;
}
.select,
.label{
display: block;
}
.select {
width: 100%;
position: absolute;
top: 0;
padding: 1em;
height: 4em;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
background: none transparent;
border: 0 none;
}
.label {
position: relative;
padding: 1em;
border-radius: .5em;
cursor: pointer;
}
.label::after {
content: "▼";
position: absolute;
right: 0;
top: 0;
padding: 1em;
border-left: 1px solid;
}
.open .label::after {
content: "▲";
}
.select-1 {
background: #21cf8f;
border-bottom: .25em solid darken(#21cf8f, 10);
&:after {
border-color: darken(#21cf8f, 10);
}
}
Styling our DropDown List: First, we will import some Google fonts into our project to update the font styling of our dropdown list, and then, using the body tag selector, we will set the background to “blue,” the font size to.9 em, the font boldness to 400, and the font face to “open sans.”
Then, using the class selector, we’ll apply styling to the custom drop-down menu. We will set the location to relative, the width to “400%,” the cursor type to “pointer,” and the display property to “block.”
Now we’ll style the choice in our drop-down menu. We will make our drop-down list’s background green with a bottom border of .25 em and a solid darkish border.
We’ll only add some simple styling to our dropdown list.
Output:
Step: Adding the Javascript
$("select").on("click" , function() {
$(this).parent(".custom-select").toggleClass("open");
});
$(document).mouseup(function (e)
{
var container = $(".custom-select");
if (container.has(e.target).length === 0)
{
container.removeClass("open");
}
});
$("select").on("change" , function() {
var selection = $(this).find("option:selected").text(),
labelFor = $(this).attr("id"),
label = $("[for='" + labelFor + "']");
label.find(".selection-choice").html(selection);
});As the user clicks on the dropdown menu, we will construct an on-click function inside the javascript and add a straightforward function. We will add the dropdown menu’s class using the addclasslist property, and we’ll set the list display to block. The user can click on any of the alternatives that will be selected after navigating through the options with the mouse.
Final Output:
Summary:
Our dropdown list project was just finished. Three primary components were utilized to develop this project: first, HTML with a form tag to build the structure of our drop-down menu; second, a CSS property to add styling to the drop-down list; and finally, Javascript to add functionality.
We sincerely hope you have a clear understanding of the project and that this blog will assist you in making your own drop-down list menu. You may access our homepage, where we’ve added a tonne of projects, by clicking the link below, which will take you there. These projects can help you learn the front end and also provide you with experience with real-world projects.
Video Output:
DropDown List Source Code:
You may access all the code we used to build this project, along with the findings, using the Codepen link provided below.
Now that we have used HTML, CSS, and Javascript to make our drop-down list, it is complete. We hope you can grasp the project and use it for your own personal webpage. Feel free to comment if you have any questions. If you find this blog to be useful, be sure to search Code with Random on Google for front-end projects with source codes and to follow the Code with Random Instagram feed.
