Create Sidebar Dropdown Menu using HTML , CSS And Javascript
Codewithrandom Blogs
Posted on May 20, 2023
Hello Readers!!Today we will learn how to make a responsive Sidebar Dropdown Menu with HTML, CSS, and JavaScript.
The term "sidebar" refers to a section of a website on the right or left side that contains important navigation links that the user can open or close. A "dropdown" menu is similar to a list of options, but it is hidden within a button or another element, and when the user clicks on the button, the dropdown menu appears. In today's blog, we'll look at how to create a sidebar dropdown menu with HTML, and JavaScript.
I hope you must have got an idea about the project.
So, Let’s sidebar dropdown menu Project By Adding The Source Codes. For That, First, We Are Using The Html Code.
Step1: HTML code For Sidebar Dropdown Menu
HTML is used to design the website's layout. So, first, we create the layout, then we style it, and finally, we add features to the button (on clicking the button menu opens ).
Now we'll look at our HTML code.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidebar menu With Sub-menus</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<nav class="navbar">
<span class="open-menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
<g fill="#252a32" fill-rule="evenodd">
<path d="M0 0h24v2H0zM0 7h24v2H0zM0 14h24v2H0z" />
</g>
</svg>
</span>
<h1><a href="./index.html" class="brand">Code With Random</a></h1>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-block">
<span class="close-menu">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path
fill="#252a32"
fill-rule="evenodd"
d="M17.778.808l1.414 1.414L11.414 10l7.778 7.778-1.414 1.414L10 11.414l-7.778 7.778-1.414-1.414L8.586 10 .808 2.222 2.222.808 10 8.586 17.778.808z"
/>
</svg>
</span>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Menu Item</a>
</li>
<li class="menu-item has-collapsible">
<a href="#"><span></span>Menu Item </a>
<ul class="menu-child">
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="menu-item has-collapsible">
<a href="#"><span></span>Menu Item</a>
<ul class="menu-child">
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="menu-item has-collapsible">
<a href="#">Menu Item</a>
<ul class="menu-child">
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="menu-item has-collapsible">
<a href="#"><span></span>Menu Item</a>
<ul class="menu-child">
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
<li class="menu-child-item"><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Menu Item</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Menu Item</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<img
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
/>
</section>
<script src="index.js"></script>
</body>
</html>
The HTML code used here is very simple; you will understand it right away. Simply read the article carefully, and you can also copy this code into your IDE for easy access.
We've added a header section where we'll build our sidebar dropdown menu. We added some SVG icons to our header section, followed by the main heading of our webpage using the h1 tag.
Now, for our sidebar, we've added a nav tag, and within that, we've added a div tag. To create the navbar menu items, we used an unordered list with anchor tags to create the different navlinks. To include a drop-down menu in our sidebar bar, we nested another unordered list within some of the menu items and created a drop-down within that menu item.
To make our webpage more visually appealing, we used the img tag to insert an image within it.
Let's take a look at our HTML structure without any styling.
Step2: CSS code For Sidebar Dropdown Menu
CSS is an abbreviation for Cascading Style Sheet. CSS will be used to style our webpage so that it looks appealing, and CSS is used to improve the user experience.
Now let's take a look at our CSS code.
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
list-style-type: none;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: #252a32;
background: #f1f5f8;
overflow: hidden;
}
img {
display: block;
width: 60%;
height: 50%;
margin: 1rem 20rem;
}
a, button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
border: none;
outline: none;
background: none;
text-decoration: none;
}
.open-menu, .close-menu {
cursor: pointer;
border: none;
outline: none;
color: #252a32;
background: none;
}
.close-menu {
position: absolute;
top: 0;
right: 1rem;
border: none;
outline: none;
color: #252a32;
background: none;
}
.brand {
font-family: inherit;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.5;
color: #d32f2f;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.header {
position: relative;
width: 100%;
height: auto;
padding: 0.75rem 1.5rem;
color: #252a32;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.header .navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .navbar .menu-wrapper::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transition: background 0.5s;
}
.header .navbar .menu-wrapper.offcanvas .menu {
transform: translate3d(0, 0, 0);
transition-duration: 0.7s;
transition-delay: 0.2s;
}
.header .navbar .menu-wrapper.offcanvas::before {
background: rgba(37, 42, 50, 0.6);
z-index: 1;
}
.header .navbar .menu {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
bottom: 0;
max-width: 20rem;
width: 100%;
padding: 1.5rem 1rem;
z-index: 2;
overflow-y: auto;
color: #252a32;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
transform: translate3d(-100%, 0, 0);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.header .navbar .menu-block {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3rem;
}
.header .navbar .menu-link {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: inherit;
text-transform: uppercase;
transition: color 0.35s ease-out;
}
.header .navbar .menu-link:hover {
color: #d32f2f;
}
.header .navbar .menu-item {
position: relative;
}
.header .navbar .menu-item a {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: inherit;
text-transform: uppercase;
padding: 0.5rem 1rem;
display: block;
color: #252a32;
transition: color 0.35s ease-out;
}
.header .navbar .menu-item a:hover {
color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible {
position: relative;
}
.header .navbar .menu-item.has-collapsible .menu-child {
display: none;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: inherit;
padding: 0.25rem;
color: #252a32;
padding-left: 2.5rem;
text-transform: uppercase;
transition: color 0.35s ease-out;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a:hover {
color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible span::after {
font-family: "Material Icons";
content: "\2B9A";
font-size: 1.5rem;
font-weight: 400;
line-height: inherit;
position: absolute;
top: 0.15rem;
right: 1rem;
color: #252a32;
transition: all 0.35s ease;
}
.header .navbar .menu-item.has-collapsible span::after:hover {
color: #d32f2f;
}
.header .navbar .menu-item.active.has-collapsible .menu-child {
display: block;
transition: all 0.35s ease;
}
.header .navbar .menu-item.active.has-collapsible span::after {
transform: rotate(90deg);
}
@media screen and (max-width:900px){
img{
width: 90%;
height: 500px;
margin: 10px 30px;
background-color: #d32f2f;
}
}
@media screen and (max-width:500px){
img{
width: 70%;
height: 300px;
margin: 10px 30px;
background-color: #d32f2f;
}
}
Now that we've included our CSS code in our article, let's go over it step by step.
Step1: First, we used the universal selector to set the margin, padding, and box-sizing to border box. We've also changed the list style to "none" and the webscrolling to "smooth." We will now style all of the elements in our html body using the body tag. We named the font family "Segoe UI" and set the font size and weight to normal. We also set the background colour to smoke white and the overflow to hidden in our body tag.
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
list-style-type: none;
text-decoration: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: #252a32;
background: #f1f5f8;
overflow: hidden;
}
Step2: We have now defined the width and height of our image using the image tag as "280" and "260px," respectively, and we have also added some margin to our image. Use the anchor "a" tag to which we added font family and font size as "inherit" from our body tag. In addition, we changed the text-decoration to "none" and the cursor to "pointer."
img {
display: block;
width: 280;
height: 260px;
margin: 0.7rem 12rem;
}
a, button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
border: none;
outline: none;
background: none;
text-decoration: none;
}
Step3: We'll set the width and height of the main heading, as well as the svg icon that opens the sidebar we define the position as absolute, the cursor to a pointer, and the colour to dark grey. To style our webpage's main heading, we used the (.brand) class font size of "1.75rem" and colour red. The text is in the centre of the page. we also define the text-transform property to uppercase all the letters of our heading.
.open-menu, .close-menu {
cursor: pointer;
border: none;
outline: none;
color: #252a32;
background: none;
}
.close-menu {
position: absolute;
top: 0;
right: 1rem;
border: none;
outline: none;
color: #252a32;
background: none;
}
.brand {
font-family: inherit;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.5;
color: #d32f2f;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.title-large {
font-family: inherit;
font-size: 2.25rem;
font-weight: 700;
line-height: inherit;
color: #252a32;
text-align: center;
text-transform: capitalize;
}
Step4: Now we'll style the header, with relative positioning and padding of "0.75rem 1.5rem." The font is a dark grey, and the background has a box shadow. The header's navigation is displayed as flex, and the items are centre aligned.
.header {
position: relative;
width: 100%;
height: auto;
padding: 0.75rem 1.5rem;
color: #252a32;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.header .navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .navbar .menu-wrapper::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transition: background 0.5s;
}
.header .navbar .menu-wrapper.offcanvas .menu {
transform: translate3d(0, 0, 0);
transition-duration: 0.7s;
transition-delay: 0.2s;
}
.header .navbar .menu-wrapper.offcanvas::before {
background: rgba(37, 42, 50, 0.6);
z-index: 1;
}
Step5: Now it's time to style the sidebar menu; the position is set to relative, the display to flex, the content is justified in the center, the font size is inherited, and the font-weight is "600" with the transition "ease-out." We've added the hover property to the menu. The font colour changes to red as the user hovers over the menu item. The transform property was updated to rotate 90 degrees vertically.
.header .navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.header .navbar .menu-wrapper::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
transition: background 0.5s;
}
.header .navbar .menu-wrapper.offcanvas .menu {
transform: translate3d(0, 0, 0);
transition-duration: 0.7s;
transition-delay: 0.2s;
}
.header .navbar .menu-wrapper.offcanvas::before {
background: rgba(37, 42, 50, 0.6);
z-index: 1;
}
.header .navbar .menu {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
bottom: 0;
max-width: 20rem;
width: 100%;
padding: 1.5rem 1rem;
z-index: 2;
overflow-y: auto;
color: #252a32;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
transform: translate3d(-100%, 0, 0);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.header .navbar .menu-block {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3rem;
}
.header .navbar .menu-link {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: inherit;
text-transform: uppercase;
transition: color 0.35s ease-out;
}
.header .navbar .menu-link:hover {
color: #d32f2f;
}
.header .navbar .menu-item {
position: relative;
}
.header .navbar .menu-item a {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: inherit;
text-transform: uppercase;
padding: 0.5rem 1rem;
display: block;
color: #252a32;
transition: color 0.35s ease-out;
}
.header .navbar .menu-item a:hover {
color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible {
position: relative;
}
.header .navbar .menu-item.has-collapsible .menu-child {
display: none;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: inherit;
padding: 0.25rem;
color: #252a32;
padding-left: 2.5rem;
text-transform: uppercase;
transition: color 0.35s ease-out;
}
.header .navbar .menu-item.has-collapsible .menu-child .menu-child-item a:hover {
color: #d32f2f;
}
.header .navbar .menu-item.has-collapsible span::after {
font-family: "Material Icons";
content: "\2B9A";
font-size: 1.5rem;
font-weight: 400;
line-height: inherit;
position: absolute;
top: 0.15rem;
right: 1rem;
color: #252a32;
transition: all 0.35s ease;
}
.header .navbar .menu-item.has-collapsible span::after:hover {
color: #d32f2f;
}
.header .navbar .menu-item.active.has-collapsible .menu-child {
display: block;
transition: all 0.35s ease;
}
.header .navbar .menu-item.active.has-collapsible span::after {
transform: rotate(90deg);
}
**Step6: **Now we'll add responsiveness to the page and specify the two maximum screen widths (900 and 500 px) If the screen size is equal to or less than the specified width, the image size will be adjusted in accordance with the specified height and width.
@media screen and (max-width:900px){
img{
width: 90%;
height: 500px;
margin: 10px 30px;
background-color: #d32f2f;
}
}
@media screen and (max-width:500px){
img{
width: 70%;
height: 300px;
margin: 10px 30px;
background-color: #d32f2f;
}
}
Now we have completed our css code and belowhere is the output after styling our webpage.
Step3: javascript code For Sidebar Dropdown Menu
Even after applying the CSS and HTML, our button does not work and does not open our sidebar. This is due to the fact that functionalities to any HTML element can only be added through Javascript, and we have not yet added Javascript code.
When I click the button, we'll use some fundamental Javascript concepts to tag and style the element with JS.
const openMenu = document.querySelector(".open-menu");
const closeMenu = document.querySelector(".close-menu");
const menuWrapper = document.querySelector(".menu-wrapper");
const hasCollapsible = document.querySelectorAll(".has-collapsible");
// Sidenav Toggle
openMenu.addEventListener("click", function () {
menuWrapper.classList.add("offcanvas");
});
closeMenu.addEventListener("click", function () {
menuWrapper.classList.remove("offcanvas");
});
// Collapsible Menu
hasCollapsible.forEach(function (collapsible) {
collapsible.addEventListener("click", function () {
collapsible.classList.toggle("active");
// Close Other Collapsible
hasCollapsible.forEach(function (otherCollapsible) {
if (otherCollapsible !== collapsible) {
otherCollapsible.classList.remove("active");
}
});
});
});
In our JavaScript code, we first define four constant variables that will be used to store the value of the selected element using document.queryselector by their class. Now we'll add the functionality; we've added an event listener that will listen for the click event. When the user clicks on the navbar, it checks to see if the selected element has an offcanvas class; if not, it will add that class to the navbar, and vice versa.
Now will we add the functionality to our dropdown menu here we have check whether dropdown menu have the collapsible class active or not if not it will active that class by click event . basically it will toggle between whether the class is active or not.
We now have the functionality in our sidebar drop-down menu. Let's watch a quick video to see how it works.
Now We have Successfully created our Responsive Sidebar Dropdown Menu poject. You can use this project for your personal webpage and We hope you understood the project , If you any doub't feel free to comment!!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: codewithrandom
Written By : arun
Posted on May 20, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024