Css sidebar navigation menu | Sidebar Nav Menu using html css javascript code - codewithrandom

Css sidebar navigation menu | Sidebar Nav Menu using html css javascript code - codewithrandom

Css sidebar navigation menu | Sidebar Nav Menu using html css javascript code - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Css sidebar navigation menu. We use HTML, and javascript for this Css sidebar navigation menu. Hope you enjoy our blog so let's start with a basic HTML structure for a Css sidebar navigation menu. 

HTML code for Sidebar Nav

 <body bgcolor="#E6E6FA">  
  <div id="mySidenav" class="sidenav">  
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>  
  <a href="#">About</a>  
  <a href="#">Services</a>  
  <a href="#">Clients</a>  
  <a href="#">Contact</a>  
 </div>  
 <!-- Use any element to open the sidenav -->  
 <span onclick="openNav()"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40px" style="padding-top: 40px; padding-left: 40px;"></span>  
 <div id="main">  
 </div>  
There is all HTML code for the Css sidebar navigation menu. Now, you can see output without CSS, then we write css & javascript for the Css sidebar navigation menu.
output
Css sidebar navigation menu | Sidebar Nav Menu using html css javascript code - codewithrandom

CSS Code for Sidebar Nav Menu

 /* The side navigation menu */  
 .sidenav {  
   height: 100%; /* 100% Full-height */  
   width: 0; /* 0 width - change this with JavaScript */  
   position: fixed; /* Stay in place */  
   z-index: 1; /* Stay on top */  
   top: 0;  
   left: 0;  
   background-color: #111; /* Black*/  
   overflow-x: hidden; /* Disable horizontal scroll */  
   padding-top: 60px; /* Place content 60px from the top */  
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */  
 }  
 /* The navigation menu links */  
 .sidenav a {  
   padding: 8px 8px 8px 32px;  
   text-decoration: none;  
   font-size: 25px;  
   font-family: Gotham;  
   color: #818181;  
   display: block;  
   transition: 0.3s  
 }  
 /* When you mouse over the navigation links, change their color */  
 .sidenav a:hover, .offcanvas a:focus{  
   color: #f1f1f1;  
 }  
 /* Position and style the close button (top right corner) */  
 .sidenav .closebtn {  
   position: absolute;  
   top: 0;  
   right: 25px;  
   font-size: 36px;  
   margin-left: 50px;  
 }  
 /* Style page content - use this if you want to push the page content to the right when you open the side navigation */  
 #main {  
   transition: margin-left .5s;  
   padding: 20px;  
 }  
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */  
 @media screen and (max-height: 450px) {  
   .sidenav {padding-top: 15px;}  
   .sidenav a {font-size: 18px;}  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output 
Css sidebar navigation menu | Sidebar Nav Menu using html css javascript code - codewithrandom

Now add javascript for click button & functionality for sidebar.

Javascript code for Sidebar Nav Menu

 /* Set the width of the side navigation to 250px */  
 function openNav() {  
   document.getElementById("mySidenav").style.width = "300px";  
 }  
 /* Set the width of the side navigation to 0 */  
 function closeNav() {  
   document.getElementById("mySidenav").style.width = "0";  
 }  
Final output

Css sidebar navigation menu | Sidebar Nav Menu using html css javascript code - codewithrandom
Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Css sidebar navigation menu. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Sidebar Nav Menu form using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post