Welcome!
This is the main content area of the webpage.
© 2024 EGOMERIT LLC, All Rights Reserved.
- Ways to Donate:
About Us
Egomerit is more than just a provider of IT services; we are your trusted partner on the journey to software excellence. With a focus on quality, reliability, and customer satisfaction, we deliver customized solutions that exceed expectations
Get a free quote
Front-End Development , Programming
- By EGOMERIT
- 0 Comments
23 September 2023
To create a sidebar that slides in and out when a hamburger button is toggled, you can use HTML, CSS, and JavaScript. Here’s an example of how you can achieve this:
Follow these guides
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="navbar">
<div class="hamburger" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="sidebar" class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<h1>Welcome!</h1>
<p>This is the main content area.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh;
background-color: silver;
}
.navbar {
background-color: #333;
color: #fff;
padding: 10px;
}
.hamburger {
display: flex;
flex-direction: column;
cursor: pointer;
z-index: 9;
position: relative;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: #fff;
margin-bottom: 5px;
}
.sidebar {
background-color: #555;
color: #fff;
width: 250px;
transition: transform 0.3s ease-in-out;
transform: translateX(-250px);
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
padding: 10px;
}
.sidebar li a:hover {
color: #cac9c9;
transition: all 0.3s;
}
.sidebar li a {
color: #fff;
text-decoration: none;
}
.content {
flex: 1;
padding: 20px;
}
.show-sidebar {
transform: translateX(0);
}JavaScript
function toggleSidebar() {
var sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('show-sidebar');
}In this example, we create a sidebar with a class of “sidebar” that initially sits off-screen to the left with a negative left value. We use CSS transitions to animate the sidebar sliding in and out. The show-sidebar class is applied to the sidebar and main content to adjust their positions when the sidebar is shown.
The hamburger button with a class of “hamburger” triggers the toggleSidebar() function when clicked. The function toggles the show-sidebar class on both the sidebar and main content, effectively showing or hiding the sidebar.
You can customize the sidebar’s appearance and content by modifying the CSS styles and adding your desired content in the #sidebar div.
Leave A Comment