Sidebar Navigation Menu Using HTML, CSS, and JavaScript
Welcome to the Codewithrandom blog. In this blog, We learn how to create a Sidebar Navigation Menu. We use HTML, CSS, and JavaScript for this Sidebar Navigation Menu.
I hope you enjoy our blog so let’s start with a basic html Structure for a Sidebar Navigation Menu.
HTML Code For Sidebar Navigation Menu
<body bgcolor="#E6E6FA"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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 the html code for the Sidebar Navigation Menu. Now, you can see output without Css and JavaScript. then we write Css code for styling and use Navigation Menu Using JavaScript.
50+ HTML, CSS & JavaScript Projects With Source Code
Html Code Output
CSS Code For Sidebar Navigation 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 Styling Using Css. Here is our updated output HTML+ CSS.
Output
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
JavaScript Code For Sidebar Navigation Menu
Now add javascript code for the open and Close button functionality for Sidebar Navigation 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 Of Sidebar Navigation Menu
10+ HTML CSS Projects For Beginners with Source Code
Now we have completed our Sidebar Navigation Menu. Here is our updated output with Html, Css, and JavaScript. Hope you like the Sidebar Navigation Menu. you can see the 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 Navigation Menu Using 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
