In this tutorial, we will build a responsive sidebar navigation menu using only HTML, CSS, and a little JavaScript. The sidebar will have the following features:
- A toggle button to open and close the sidenav on mobile devices.
- A collapsible menu on desktop that switches between an expanded and icon-only view.
Let's break this down into three main steps: structuring the HTML to create the foundation of the sidebar, styling with CSS to ensure a visually appealing and responsive layout, and adding interactivity with JavaScript to enable dynamic toggling between views.
1. HTML Structure
First, we define the basic structure of our page, including the sidenav, a toggle button, and a content area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive SideNav</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="toggle" onclick="toggleSidenav()">
<i class="fa fa-bars"></i>
</button>
<nav id="sidenav">
<ul>
<li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
<li><a href="#"><i class="fa fa-envelope"></i><span>Messages</span></a></li>
<li><a href="#"><i class="fa fa-cog"></i><span>Settings</span></a></li>
</ul>
</nav>
<main>
<header>
<h1>Welcome</h1>
</header>
<article>
<section>Lorem ipsum dolor sit amet...</section>
<section>Lorem ipsum dolor sit amet...</section>
</article>
</main>
<script src="sidenav.js"></script>
</body>
</html>
Explanation:
- The
<nav>element contains the sidebar menu. - The toggle button (
<button class="toggle">) is used to show/hide the sidebar. - The
<main>section represents the main content area.
2. Styling with CSS
Now, let's style the sidenav, main content, and make it responsive.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
overflow: hidden;
}
button.toggle {
z-index: 10;
position: fixed;
left: 12px;
top: 10px;
background-color: #575757;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
nav {
width: 250px;
height: 100vh;
background-color: #333;
transition: all 0.3s;
padding-top: 60px;
&.min {
width: 60px;
span {
opacity: 0;
}
}
ul {
color: white;
a {
display: flex;
gap: 10px;
padding: 10px 20px;
color: white;
text-decoration: none;
&:hover {
background-color: gray;
}
span {
transition: opacity 0.3s ease-in-out;
}
}
}
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
header {
height: 60px;
display: flex;
align-items: center;
padding: 20px;
border-bottom: 1px solid #ccc;
}
article {
padding: 20px;
}
@media (max-width: 768px) {
header {
padding-left: 55px;
}
nav {
position: fixed;
left: -250px;
top: 0;
}
nav.active {
left: 0;
}
}
Explanation:
- The sidebar starts with a width of
250pxand collapses to60pxwhen minimized. - On mobile (
max-width: 768px), the sidebar is hidden (left: -250px) and slides in when active. - The toggle button is fixed in the top-left corner.
3. JavaScript for Interactivity
Finally, we add JavaScript to handle sidebar toggling.
function toggleSidenav() {
const sidenav = document.querySelector("#sidenav");
if (window.innerWidth <= 768) {
sidenav.classList.remove("min");
sidenav.classList.toggle("active");
} else {
sidenav.classList.remove("active");
sidenav.classList.toggle("min");
}
}
Explanation:
- The function checks if the screen is mobile (
max-width: 767px). - If mobile, it toggles the
.activeclass to show/hide the menu. - If desktop, it toggles the
.minclass to collapse/expand the menu.
Conclusion
With this setup, we have a responsive side navigation that:
- Expands and collapses on desktops.
- Slides in and out on mobile devices.
- Implemented using JavaScript for interactivity.
Checkout demo at https://codepen.io/nanosoftonline/pen/wBvKRgQ
Top comments (0)