How To Create Sidebar Dropdown Using HTML CSS & JavaScript
Today in this blog you’ll learn how to create a Sidebar Dropdown Using HTML CSS & JavaScript. This sidebar design includes a sub-menu.
Today in this blog, I’ll share with you this program (Sidebar Dropdown). At first, there is only a button and this sidebar menu is hidden. But when you clicked on that button then this sidebar will be shown by sliding from the left side. In the menus, there is a cool hover effect too.
HTML CODE
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Sidebar Dropdown Using HTML CSS & JavaScript.</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
</head>
<body>
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
<div class="text">Sidebar Dropdown</div>
<ul>
<li class="active"><a href="#">Dashboard</a></li>
<li>
<a href="#" class="feat-btn"
>Features
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li><a href="#">Pages</a></li>
<li><a href="#">Elements</a></li>
</ul>
</li>
<li>
<a href="#" class="serv-btn"
>Services
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li><a href="#">App Design</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Overview</a></li>
<li><a href="#">Shortcuts</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
<div class="content">
<div class="header">Sidebar Dropdown Using HTML CSS & JavaScript.</div>
</div>
<script>
$(".btn").click(function () {
$(this).toggleClass("click");
$(".sidebar").toggleClass("show");
});
$(".feat-btn").click(function () {
$("nav ul .feat-show").toggleClass("show");
$("nav ul .first").toggleClass("rotate");
});
$(".serv-btn").click(function () {
$("nav ul .serv-show").toggleClass("show1");
$("nav ul .second").toggleClass("rotate");
});
$("nav ul li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
HTML OUTPUT
To create this program (Side Menu Bar with sub-menu). First , you need to create two files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
50+ Html ,Css & Javascript Projects With Source Code
A drop-down menu is a horizontal list of menu options that each contain a vertical menu. When you hover or click one of the primary options in a drop-down menu, a list of choices will âdrop downâ below the main menu. The most common type of drop-down menu is a menu bar or Navigation Menu bar.
You Might Like This:
- Copy Text to Clipboard
- 15+ Dropdown Menu CSS
- Portfolio Website Using Html And Css
- Create Login Form Validation
- Dark Mode Toggle Button
CSS CODE
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.btn {
position: absolute;
top: 15px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
background: #1b1b1b;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click {
left: 260px;
}
.btn span {
color: white;
font-size: 28px;
line-height: 45px;
}
.btn.click span:before {
content: "\f00d";
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
left: -250px;
background: #1b1b1b;
transition: left 0.4s ease;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;
}
nav ul {
background: #1b1b1b;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: cyan;
background: #1e1e1e;
border-left-color: cyan;
}
nav ul li a:hover {
background: #1e1e1e;
}
nav ul ul {
position: static;
display: none;
}
nav ul .feat-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: cyan !important;
background: #1e1e1e !important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header {
font-size: 45px;
font-weight: 600;
}
.content p {
font-size: 30px;
font-weight: 500;
}
Now create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
How do I add a dropdown to the sidebar?
Sidebar means the section on the website that is located on the right or left side with some important navigation links and the user can open or close it. Dropdown menu means that sub-menu or nav links which are hidden in very first but when user do hover or click on the main nav link then sub-menu appears.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
With the implementation in this tutorial, we can add as many menus and submenus in the data file and the multilevel dropdown magically appears in the frontend. However, we should be mindful of the levels of dropdowns we add so that users donât see it as annoying.
If you have questions and or contributions, Iâm in the comment section. And if you like this Blog, ensure you share it around the web.
Final OutputÂ
If you enjoyed reading this Sidebar Dropdown Using HTML CSS & JavaScript post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.
if you have any confusion Regarding this blog Comment below or you can contact us by filling out our contact us form from the home section.
written by â Ninja_webTech
