Sidebar Dropdown Menu using HTML, CSS And JavaScript Code

Sidebar Dropdown Menu using HTML, CSS And JavaScript Code

 

SIDEBAR DROPDOWN | SIDEBAR DROPDOWN USING HTML CSS AND JAVASCRIPT…..

A very warm welcome to code with random’s new blog. Today in this blog we are creating a sidebar dropdown. Before proceeding the code explanation part let’s know –
What is Sidebar?
Sidebar means it is located on the left or right with a navigation link that the user can open or close it/toggle it.
What is Dropdown Menu?
Drop menu means the sub-menu or nav link is hidden but when we click on nav-link then it makes the sub-menu visible.
So Let’s see step by step tutorial on how to create a Sidebar Dropdown menu…..
Here is a live server of the Sidebar dropdown menu…

Live Server:-

You can experience this drop-down menu feature by clicking this live server.

See the Pen Create Dropdown in Side Navigation Bar by Eyad Alasseh (@Web-Development) on CodePen.

HTML CODE:-

HTML is used for creating the layout of the website. So Firstly we develop the layout then styling is the second thing, at last, we will add features to the button(on clicking the button menu opens ).

Inside the body tag, you can add the following content.

We are going to use  <button> element for Dropdown menu .Then we want to add link in dropdown to  every child of dropdown or sub-menu lists.
We are using fontawesome for icons You can take reference from here and see the docs how to integrate or use font-awesome icons in your webpage.
We are creating two div containers one for side navbar while second for dropdown menu.Inside the side div container we are adding three links using anchor tag for about,services and clients respectively.
On clicking the dropdown button we are adding here only 3 links you can add more if you want to. For adding links we use anchor tag in the href attribute we give link of the page.Then last one is search button.

 

 <div class="sidenav">  
  <a href="#about">About</a>  
  <a href="#services">Services</a>  
  <a href="#clients">Clients</a>  
  <a href="#contact">Contact</a>  
  <button class="dropdown-btn">Dropdown   
   <i class="fa fa-caret-down"></i>  
  </button>  
  <div class="dropdown-container">  
   <a href="#">Link 1</a>  
   <a href="#">Link 2</a>  
   <a href="#">Link 3</a>  
  </div>  
  <a href="#contact">Search</a>  
 </div>  
 <div class="main">  
  <h2>Sidebar Dropdown</h2>  
  <p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p>  
  <p>This sidebar is of full height (100%) and always shown.</p>  
  <p>Some random text..</p>  
 </div>  

HTML OUTPUT:-

Sidebar Dropdown Menu using HTML, CSS And JavaScript Code

 

 CSS CODE:-

CSS is used for styling/decoration of the webpage color,alignment,font or others things related to styling.Without CSS, functionalities can be added to the javascript,CSS is used only for styling.

Ecommerce Website Using Html Css And Javascript

We are using only the basic properties of styling like flex-box,border-box,display-properties,etc.
 /* Fixed sidenav, full height */  
 .sidenav {  
  height: 100%;  
  width: 200px;  
  position: fixed;  
  z-index: 1;  
  top: 0;  
  left: 0;  
  background-color: #111;  
  overflow-x: hidden;  
  padding-top: 20px;  
 }  
 /* Style the sidenav links and the dropdown button */  
 .sidenav a, .dropdown-btn {  
  padding: 6px 8px 6px 16px;  
  text-decoration: none;  
  font-size: 20px;  
  color: #818181;  
  display: block;  
  border: none;  
  background: none;  
  width:100%;  
  text-align: left;  
  cursor: pointer;  
  outline: none;  
 }  
 /* On mouse-over */  
 .sidenav a:hover, .dropdown-btn:hover {  
  color: #f1f1f1;  
 }  
 /* Main content */  
 .main {  
  margin-left: 200px; /* Same as the width of the sidenav */  
  font-size: 20px; /* Increased text to enable scrolling */  
  padding: 0px 10px;  
 }  
 /* Add an active class to the active dropdown button */  
 .active {  
  background-color: green;  
  color: white;  
 }  
 /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */  
 .dropdown-container {  
  display: none;  
  background-color: #262626;  
  padding-left: 8px;  
 }  
 /* Optional: Style the caret down icon */  
 .fa-caret-down {  
  float: right;  
  padding-right: 8px;  
 }   

CSS OUTPUT:-

Sidebar Dropdown Menu using HTML, CSS And JavaScript Code

 

 Javascript Code:-

Still after implementing the CSS and HTML our buttons are not working this is because functionalities to any element in HTML can de added through Javascript only and till now we are not added javascript code to the the code.

We are some basic concepts of DOM(Document-Object Model)  for tagging the element and styling it through js whenever I click the button.

Here in this output we can see that the dropdown button is working when we added the js code as given here….
 //* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */  
 var dropdown = document.getElementsByClassName("dropdown-btn");  
 var i;  
 for (i = 0; i < dropdown.length; i++) {  
  dropdown[i].addEventListener("click", function() {  
   this.classList.toggle("active");  
   var dropdownContent = this.nextElementSibling;  
   if (dropdownContent.style.display === "block") {  
    dropdownContent.style.display = "none";  
   } else {  
    dropdownContent.style.display = "block";  
   }  
  });  
 }  

JS OUTPUT:-

Sidebar Dropdown Menu

Hope you guys understand and like it. It looks responsive and beautiful…..On most websites, you will see the dropdown sidebar.
Please Feel free to ask any doubts in the comment box. Also, share your reviews/feedback on this blog.
If any doubt free to ask in the comment box……
Thank you😄
Written by_Sayali Kharat
& Himanshu_Singh
Share on:

Leave a Comment