Responsive Sidebar Navigation Menu (HTML & CSS)
A responsive sidebar navigation menu is a great way to create a collapsible navigation layout that adapts to different screen sizes. This solution uses HTML and CSS only, with a simple hover effect for smooth interaction.
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar Navigation Menu</title>
<meta name="description" content="Learn how to create a responsive sidebar navigation menu using HTML and CSS. Includes collapsible menu design with smooth transitions.">
<meta name="keywords" content="responsive sidebar menu, HTML CSS navigation, sidebar menu design, collapsible sidebar, CSS menu toggle">
</head>
<body>
<!-- Sidebar Navigation -->
<div class="sidebar">
<a href="#">🏠 Home</a>
<a href="#">📄 About</a>
<a href="#">🛠 Services</a>
<a href="#">📞 Contact</a>
</div>
<!-- Main Content Area -->
<div class="main-content">
<h1>Responsive Sidebar Navigation</h1>
<p>Hover over the sidebar to expand it and explore the menu.</p>
</div>
</body>
</html>
Step 2: CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
height: 100vh;
background-color: #f4f4f4;
}
/* Sidebar Styling */
.sidebar {
width: 250px;
height: 100%;
background-color: #333;
position: fixed;
left: 0;
top: 0;
padding-top: 20px;
transition: width 0.3s ease-in-out;
}
.sidebar a {
display: block;
color: white;
padding: 15px 20px;
text-decoration: none;
font-size: 18px;
transition: background 0.3s;
}
.sidebar a:hover {
background-color: #555;
}
/* Responsive Sidebar - Collapsed */
.sidebar:hover {
width: 300px;
}
/* Main Content */
.main-content {
margin-left: 250px;
padding: 20px;
flex: 1;
}
/* Responsive Design */
@media (max-width: 768px) {
.sidebar {
width: 60px;
overflow: hidden;
}
.sidebar:hover {
width: 200px;
}
.sidebar a {
text-align: center;
font-size: 16px;
}
.main-content {
margin-left: 60px;
}
}
Explanation
-
Sidebar Structure
- The sidebar is fixed on the left with a dark background.
- It contains navigation links that change color when hovered over.
-
Hover-to-Expand Effect
- On larger screens, hovering expands the sidebar smoothly.
- On smaller screens, it collapses to a thin strip.
-
Responsive Design
- Uses
@media (max-width: 768px)to adjust layout for smaller screens. - Shrinks the sidebar and changes text alignment for better usability.
- Uses