Responsive CSS 3 Sidebar Menu with Multi Level Sub Menus
Responsive CSS 3 Sidebar Menu With Multi Level Sub Menus
A responsive sidebar menu is one of the most important navigation components used in modern websites, admin dashboards, blogs, and web applications. This Responsive CSS3 Sidebar Menu with Multi Level Sub Menus is built using HTML and CSS to create a clean, organized, and user-friendly navigation system without relying on JavaScript frameworks. The multi-level submenu structure allows websites to organize a large number of navigation links while maintaining a professional and clutter-free interface that works smoothly across desktops, tablets, and mobile devices.
This project uses HTML to create the sidebar navigation structure and CSS3 to design the layout, responsive behavior, hover effects, transitions, and expandable submenu interactions. Since the project is built with pure CSS techniques, it remains lightweight, fast-loading, and easy to customize. It is an excellent learning project for beginners who want to master CSS navigation menus and a reusable sidebar template for developers building business websites, admin panels, portfolios, or educational platforms.
Responsive CSS3 Sidebar Menu with Multi Level Sub Menus:
A Responsive CSS3 Sidebar Menu with Multi Level Sub Menus is a vertical navigation system that allows users to browse website sections through expandable categories and nested submenu items. Unlike a simple navigation menu, multi-level sidebars help organize complex website structures by grouping related links together, making navigation easier and improving the overall user experience. In this project, HTML is used to build semantic navigation elements such as <nav>, <ul>, <li>, <a>, and <div>, while CSS3 is responsible for creating the sidebar layout, responsive design, hover effects, transitions, and submenu animations.
The sidebar supports multiple submenu levels, allowing you to create organized navigation for large websites without making the interface difficult to use. CSS selectors, transitions, positioning, and responsive media queries work together to provide smooth interactions when users expand or collapse submenu sections. The layout automatically adjusts to different screen sizes, ensuring that the navigation remains accessible and user-friendly on desktops, laptops, tablets, and smartphones.
This sidebar menu project is perfect for beginners who want to improve their HTML and CSS skills by building a practical navigation component using pure CSS. It is also ideal for students, freelancers, and professional developers looking for a lightweight, reusable sidebar menu that can be customized for admin dashboards, business websites, learning management systems, portfolios, or other responsive web applications. The clean code structure makes it easy to add more menu items, submenu levels, icons, and custom styling according to project requirements.
Steps to Create a Responsive CSS3 Sidebar Menu:
Follow these simple steps to build a responsive sidebar menu with multi-level submenus using HTML and CSS:
- Create a project folder and name it responsive-css3-sidebar-menu.
- Inside the project folder, create two files named index.html and style.css.
- Design the sidebar navigation structure using semantic HTML elements such as
<nav>,<ul>,<li>,<a>, and<div>. - Add navigation links and organize them into multiple submenu levels.
<!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html>
<head>
<title>Sidebar using Bootstrap 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Poppins:300,400,600,700&lang=en" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap 3 Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Category</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
<h2>Collapsible Sidebar Using Bootstrap 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
Apply CSS 3 styling to design the sidebar layout, typography, colors, spacing, and menu items.Create submenu animations and hover effects using CSS selectors, transitions, and positioning. Add a responsive toggle button to open and close the sidebar navigation on smaller screens.Save the project files and open index.html in your browser to test the responsive sidebar navigation menu.
<style>
/*
DEMO STYLE
*/
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #3492eb;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #107ce3;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #3492eb;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #107ce3;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #107ce3;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #107ce3;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
</style>
