Hello developers, today in this blog you will learn to create an Advanced Dropdown Menu using HTML, CSS & JavaScript.
A dropdown menu is a graphical element, which helps visitors to find particular pages on your website. A dropdown menu is a list of choices that appears on a computer screen when a person clicks on the menu's title. Clicking on the top-level menu label, there is the list of options to a dropdown.In this program (Advanced Dropdown Menu) on the webpage, there is an input box that contains a dropdown button at the right of the input box. When you click on the dropdown button, the menu container dropdown from the input field. There are four menu lists on the menu container, where two buttons have a drop menu or the drop-list. When you click on that menu, the menu container smoothly slides to the left side and shows the dropdown. And there is also a back arrow button that is used to redirect you to the menu container from the droplist. You can give as many drop-list or drop-menu as you need.
The source code of this Advanced Dropdown Menu using HTML, CSS & JavaScript is given below, you can copy the source code of this program. You can use this code of the Advanced Dropdown Menu using HTML, CSS & JavaScript, you can take this code to the next level with your creativity.
Advanced Dropdown Menu [Source Code]
To make this website (Advanced Dropdown Menu), you need to create three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@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: 'Open Sans', sans-serif;
}
body{
background: #38ef7d;
}
nav{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
nav .drop-btn{
width: 400px;
background: #12192c;
border-radius: 30px;
line-height: 55px;
font-size: 20px;
font-weight: 500;
color: #b0b3b8;
padding: 0 20px;
z-index: 1;
}
nav .drop-btn span{
float: right;
line-height: 50px;
font-size: 28px;
cursor: pointer;
}
nav .tooltip{
position: absolute;
right: 20px;
bottom: -20px;
height: 15px;
width: 15px;
background: #12192c;
transform: rotate(45deg);
display: none;
}
nav .tooltip.show{
display: block;
}
nav .wrapper{
position: absolute;
top: 65px;
display: flex;
width: 400px;
overflow: hidden;
border-radius: 30px;
background: #12192c;
display: none;
transition: all 0.3s ease;
}
nav .wrapper.show{
display: block;
display: flex;
}
.wrapper ul{
width: 400px;
list-style: none;
padding: 10px;
transition: all 0.3s ease;
}
.wrapper ul li{
line-height: 55px;
}
.wrapper ul li a{
position: relative;
color: #b0b3b8;
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: #3A3B3C;
}
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: #b0b3b8;
}
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: #b0b3b8;
cursor: pointer;
}
.wrapper .arrow span{
margin-right: 15px;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
position: fixed;
bottom:20px;
left:40%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
}
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.onclick = (()=>{
menu_wrapper.classList.toggle("show");
tooltip.classList.toggle("show");
});
setting_item.onclick = (()=>{
menu_bar.style.marginLeft = "-400px";
setTimeout(()=>{
setting_drop.style.display = "block";
}, 100);
});
help_item.onclick = (()=>{
menu_bar.style.marginLeft = "-400px";
setTimeout(()=>{
help_drop.style.display = "block";
}, 100);
});
setting_btn.onclick = (()=>{
menu_bar.style.marginLeft = "0px";
setting_drop.style.display = "none";
});
help_btn.onclick = (()=>{
help_drop.style.display = "none";
menu_bar.style.marginLeft = "0px";
});
Thank you for reading our blog. If you face any problem in creating this Advanced Dropdown Menu using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team