Unique Drop-down Menu using HTML, CSS & JavaScript
Jejaknesia.com - Hi web developer, welcome back to Jejaknesia! In this article, we will discuss how to create a "Unique Drop-down Menu using HTML CSS & JavaScript".
Unique Drop-down Menu using HTML CSS & JavaScript
In the world of web development, creating an interactive website is important. One of the most common elements you often see is a drop-down menu. In this tutorial, we’ll discuss how to create a drop-down menu that stands out from the rest, using only HTML, CSS, and JavaScript.
Why Choose a Unique Drop-down Menu?
Before diving into the technical part, let’s talk about why making a unique drop-down menu is a great idea.
A regular drop-down menu usually just contains a list of options that appear when you click or hover over it. But with a bit of creativity and the right use of HTML, CSS, and JavaScript, you can create a drop-down menu that’s much more attractive and interactive!
Step 1: Prepare the HTML Document
The first step in creating a unique drop-down menu is to prepare the HTML document that will serve as the foundation for the menu. The HTML document is the basic structure used to add all the menu elements. You can create the basic HTML structure as follows:
<!DOCTYPE html>
<!-- Created By jejaknesia -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Advanced Drop-down Menu | jejaknesia</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<nav>
<div class="drop-btn">
jejaknesia <span class="fas fa-bars"></span>
</div>
<div class="tooltip"></div>
<div class="wrapper">
<ul class="menu-bar">
<li>
<a href="#">
<div class="icon">
<span class="fas fa-home"></span>
</div>
Home
</a>
</li>
<li class="setting-item">
<a href="#">
<div class="icon">
<span class="fas fa-cog"></span>
</div>
Settings & privacy <i class="fas fa-angle-right"></i>
</a>
</li>
<li class="help-item">
<a href="#">
<div class="icon">
<span class="fas fa-question-circle"></span>
</div>
Help & support <i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-user"></span>
</div>
About us
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-comment-alt"></span>
</div>
Feedback
</a>
</li>
</ul>
<!-- Settings & privacy Menu-items -->
<ul class="setting-drop">
<li class="arrow back-setting-btn"><span class="fas fa-arrow-left"></span>Settings & privacy</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-user"></span>
</div>
Personal info
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-lock"></span>
</div>
Password
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-address-book"></span>
</div>
Activity log
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-globe-asia"></span>
</div>
Languages
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-sign-out-alt"></span>
</div>
Log out
</a>
</li>
</ul>
<!-- Help & support Menu-items -->
<ul class="help-drop">
<li class="arrow back-help-btn"><span class="fas fa-arrow-left"></span>Help & support</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-question-circle"></span>
</div>
Help centre
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-envelope"></span>
</div>
Support Inbox
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-comment-alt"></span>
</div>
Send feedback
</a>
</li>
<li>
<a href="#">
<div class="icon">
<span class="fas fa-exclamation-circle"></span>
</div>
Report problem
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>Step 2: Styling with CSS
To create a unique and appealing drop-down menu, you need to add CSS (Cascading Style Sheets) to the <head> section of your HTML document. The CSS defines the menu’s appearance and animations according to your design preferences.
You can start by setting the basic style of the menu, such as its size, color, and positioning. With the flexibility of CSS, you can design different layouts and visual effects for your menu, enhancing user experience:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-family: 'Poppins', sans-serif;
}
body{
background: #fff;
overflow: hidden;
}
nav{
position: relative;
margin: 20px;
}
nav .drop-btn{
width: 100%;
max-width: 400px;
background: #308deb;
border-radius: 5px;
line-height: 55px;
font-size: 20px;
font-weight: 500;
color: #fff;
padding: 0 20px;
}
nav .drop-btn span{
float: right;
line-height: 50px;
font-size: 28px;
cursor: pointer;
}
nav .tooltip{
position: absolute;
left: 20px;
bottom: -20px;
height: 15px;
width: 15px;
background: #308deb;;
transform: rotate(45deg);
display: none;
}
nav .tooltip.show{
display: block;
}
nav .wrapper{
position: absolute;
top: 65px;
display: flex;
width: 100%;
max-width: 400px;
overflow: hidden;
border-radius: 5px;
background: #308deb;
display: none;
transition: all 0.3s ease;
}
nav .wrapper.show{
display: flex;
justify-content: space-between;
}
.wrapper ul{
width: 100%;
max-width: 400px;
list-style: none;
padding: 10px;
transition: all 0.3s ease;
}
@media screen and(max-width: 640px){
nav .wrapper, .wrapper ul, nav .drop-btn{
width: 100%;
}
}
.wrapper ul li{
line-height: 55px;
}
.wrapper ul li a{
position: relative;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 0 10px;
display: flex;
border-radius: 8px;
align-items: center;
text-decoration: none;
}
.wrapper ul li:hover a{
background: #0a69c9;
}
ul li a .icon{
height: 40px;
width: 40px;
margin-right: 13px;
background: #ffffff1a;
display: flex;
justify-content: center;
text-align: center;
border-radius: 50%;
}
ul li a .icon span{
line-height: 40px;
font-size: 20px;
color: #fff;
}
ul li a i{
position: absolute;
right: 10px;
font-size: 25px;
pointer-events: none;
}
.wrapper ul.setting-drop,
.wrapper ul.help-drop{
display: none;
}
.wrapper .arrow{
padding-left: 10px;
font-size: 20px;
font-weight: 500;
color: #fff;
cursor: pointer;
}
.wrapper .arrow span{
margin-right: 15px;
}Step 3: Adding Interactivity with JavaScript
Now, let’s make your drop-down menu interactive using JavaScript. This JavaScript code should be placed right above the closing </body> tag in your HTML file.
By adding this code, your drop-down menu will not only look attractive but also become responsive to user interactions, offering a better experience.
Here’s the JavaScript code you’ll need:
document.addEventListener('DOMContentLoaded', () => {
const drop_btn = document.querySelector(".drop-btn span");
const tooltip = document.querySelector(".tooltip");
const menu_wrapper = document.querySelector(".wrapper");
const menu_bar = document.querySelector(".menu-bar");
const setting_drop = document.querySelector(".setting-drop");
const help_drop = document.querySelector(".help-drop");
const setting_item = document.querySelector(".setting-item");
const help_item = document.querySelector(".help-item");
const setting_btn = document.querySelector(".back-setting-btn");
const help_btn = document.querySelector(".back-help-btn");
drop_btn.addEventListener('click', () => {
menu_wrapper.classList.toggle("show");
tooltip.classList.toggle("show");
});
setting_item.addEventListener('click', () => {
menu_bar.style.marginLeft = "-400px";
setTimeout(() => {
setting_drop.style.display = "block";
}, 100);
});
help_item.addEventListener('click', () => {
menu_bar.style.marginLeft = "-400px";
setTimeout(() => {
help_drop.style.display = "block";
}, 100);
});
setting_btn.addEventListener('click', () => {
menu_bar.style.marginLeft = "0px";
setting_drop.style.display = "none";
});
help_btn.addEventListener('click', () => {
help_drop.style.display = "none";
menu_bar.style.marginLeft = "0px";
});
});
Save your project and view the result.
In this article, we’ve provided a complete guide on how to create an attractive and functional drop-down menu using a combination of HTML, CSS, and JavaScript. We hope this tutorial helps you develop a more dynamic and interactive website interface.
Don’t hesitate to experiment with the code we’ve provided. If you have any questions, suggestions, or feedback, feel free to leave a comment or contact us directly. We’d be happy to assist you.
Posting Komentar