This code implements a responsive vertical sidebar menu with submenu functionality. It utilizes HTML, CSS, and JavaScript to create a collapsible sidebar menu. The menu can expand and collapse on click, allowing easy navigation. Moreover, it highlights active links for better user interaction.
You can use this code to create a responsive sidebar menu with submenus for your website. It’s beneficial for organizing and navigating through various sections of your site easily.
How to Create a Responsive Vertical Sidebar Menu With Submenu
1. First, let’s set up the basic HTML structure for our sidebar menu. We’ll include links for the main menu items and submenus if needed.
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
<a href="#" class="nav__logo">W3OpenSource</a>
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Messenger</span>
</a>
<div class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
<a href="#" class="collapse__sublink">Data</a>
<a href="#" class="collapse__sublink">Group</a>
<a href="#" class="collapse__sublink">Members</a>
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Analytics</span>
</a>
<div class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
<a href="#" class="collapse__sublink">Data</a>
<a href="#" class="collapse__sublink">Group</a>
<a href="#" class="collapse__sublink">Members</a>
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Settings</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<h1>Componentes</h1>
<!-- ===== IONICONS ===== -->
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
2. Next, let’s add styles to our sidebar menu to make it visually appealing and responsive.
/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
/*===== VARIABLES CSS =====*/
:root{
--nav-width: 44px;
/*===== Colores =====*/
--first-color: #0C5DF4;
--bg-color: #12192C;
--sub-color: #B6CEFC;
--white-color: #FFF;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/*===== l NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/*===== NAV =====*/
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand{
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle{
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo{
color: var(--white-color);
font-weight: 600;
}
.nav__link{
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover{
background-color: var(--first-color);
}
.nav__icon{
font-size: 1.25rem;
}
.nav__name{
font-size: var(--small-font-size);
}
/*Expander menu*/
.expander{
width: calc(var(--nav-width) + 9.25rem);
}
/*Add padding body*/
.body-pd{
padding: 2rem 0 0 16rem;
}
/*Active links menu*/
.active{
background-color: var(--first-color);
}
/*===== COLLAPSE =====*/
.collapse{
grid-template-columns: 20px max-content 1fr;
}
.collapse__link{
justify-self: flex-end;
transition: .5s;
}
.collapse__menu{
display: none;
padding: .75rem 2.25rem;
}
.collapse__sublink{
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover{
color: var(--white-color);
}
/*Show collapse*/
.showCollapse{
display: block;
}
/*Rotate icon*/
.rotate{
transform: rotate(180deg);
}
4. Finally, add the following JavaScript functionality to toggle the sidebar menu and handle submenu interactions.
/*===== EXPANDER MENU =====*/
const showMenu = (toggleId, navbarId, bodyId)=>{
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if(toggle && navbar){
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander')
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle','navbar','body-pd')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/*===== COLLAPSE MENU =====*/
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++){
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
})
}
You can customize the menu to fit your website’s design and navigation structure. Modify the HTML content to add or remove menu items and submenus. Similarly, adjust CSS styles to change colors, fonts, and layout.
That’s all! hopefully, you have successfully created a vertical sidebar menu with a submenu. If you have any questions or suggestions, feel free to comment below.
