Design a Toggleable Sidebar using HTML CSS and JavaScript

Last Updated : 26 Jul, 2024

In this article, we will create a toggleable sidebar navigation menu using HTML, CSS, and JavaScript. The navigation menu allows users to open and close a sidebar to access various sections of a website. When the user clicks on a navigation item, the corresponding content is displayed in the main content area. We'll make the website responsive to different screen sizes for a seamless user experience.

Approach

First, we will make nav items with the help of anchor tags.
Now by using CSS properties like position fixed, left, and right properties, we will align the navbar to the sidebar.
Design the navbar including headings, and paragraphs by using CSS properties.
Change the content of the heading dynamically by using the showContent () function.
Lastly, make a button for closing the navbar by using the function name closeNav().

Example: In this example, we write a code to build a toggleable sidebar using HTML CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content=
		"width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
	<title>
		Toggleable Sidebar using 
		HTML CSS & JavaScript
	</title>
</head>

<body>
	<div id="sideMenu" class="sideMenu">
		<a href="javascript:void(0)"
			class="closeBtn"
			onclick="closeNav()">×</a>
		<div class="mainMenu">
			<h2>SideMenu</h2>
			<a href="javascript:void(0)"
				onclick="showContent('Home')">Home</a>
			<a href="javascript:void(0)"
				onclick="showContent('About')">About</a>
			<a href="javascript:void(0)"
				onclick="showContent('Portfolio')">Portfolio</a>
			<a href="javascript:void(0)"
				onclick="showContent('Services')">Services</a>
			<a href="javascript:void(0)"
				onclick="showContent('Contact')">Contact</a>
		</div>
	</div>
	
	<div id="contentArea">
		<span style="font-size: 30px; cursor: pointer"
			onclick="openNav()">☰</span>
		<div class="contentText">
			<h2 id="contentTitle">
				Toggle Sidebar Navigation</h2>
			<h3>HTML CSS JS</h3>
		</div>
	</div>
	<script src="script.js"></script>
</body>

</html>

CSS

/* style.css */
body {
    margin: 0;
    font-family: poppins;
}

.sideMenu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #478cff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.mainMenu h2 {
    text-align: center;
    letter-spacing: 7px;
    color: #fff;
    background: #111;
    padding: 20px 0;
}

.sideMenu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: 0.3s;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

.mainMenu a:hover {
    color: #fff;
    background: #111;
}

.sideMenu .closeBtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#contentArea {
    transition: margin-left 0.5s;
    padding: 16px;
}

.contentText {
    padding: 100px 20px;
    text-align: center;
}

.contentText h2 {
    background: #478cff;
    display: inline-block;
    padding: 15px 10px;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
}

.contentText h3 {
    text-transform: uppercase;
    font-size: 18px;
    margin: 0;
    letter-spacing: 3px;
}

@media screen and (min-width: 768px) {
    .contentText {
        padding: 100px 180px;
    }

    .contentText h2 {
        padding: 15px 35px;
        font-size: 50px;
    }

    .contentText h3 {
        font-size: 45px;
    }
}

JavaScript

function openNav() {
	document.getElementById("sideMenu")
		.style.width = "300px";
	document.getElementById("contentArea")
		.style.marginLeft = "300px";
}

function closeNav() {
	document.getElementById("sideMenu")
		.style.width = "0";
	document.getElementById("contentArea")
		.style.marginLeft = "0";
}

function showContent(content) {
	document.getElementById("contentTitle")
		.textContent = content + " page";
		
	closeNav();
}

Output:

Design a Traffic Light Animation using HTML and CSS

lunatic1

Improve

Article Tags :

Design a Toggleable Sidebar using HTML CSS and JavaScript

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?