➧A Vanilla JavaScript Plugin To Create Responsive Sidebar Menu • Softbranchdevelopers

Description:

You must have seen our previous plugins and CSS libraries to create Responsive menu bar.

Here in this blog post, I’m going to share with you a very light weight and responsive sliding sidebar menu plugin which is created using JavaScript and CSS3. And the best part is, you can customize it as per your requirement.

How can I use it?

Step 1: First, include the app.js file in your web page. Please change the path as per your folder structure.

Step 2: Create the Humburger toggle button on your webpage.

<button class=”sidebar-toggle”>
Place Humburger icon here
</button>

Step 3: Then, create HTML layout for your menu items. You can also create social icons in the footer section of the menu bar.

<aside class=”sidebar”>
<div class=”sidebar-header”>
<img src=”./logo.svg” class=”logo” alt=””>
<button class=”close-btn”>
<i class=”fas fa-times”></i>
</button>
</div>
<!– links –>
<ul class=”links”>
<li>
<a href=”index.html”>home</a>
</li>
<li>
<a href=”about.html”>about</a>
</li>
<li>
<a href=”projects.html”>projects</a>
</li>
<li>
<a href=”contact.html”>contact</a>
</li>
</ul>
<!– social media –>
<ul class=”social-icons”>
<li>
<a href=”https://www.twitter.com”>
<i class=”fab fa-facebook”></i>
</a>
</li>
<li>
<a href=”https://www.twitter.com”>
<i class=”fab fa-twitter”></i>
</a>
</li>
<li>
<a href=”https://www.twitter.com”>
<i class=”fab fa-behance”></i>
</a>
</li>
<li>
<a href=”https://www.twitter.com”>
<i class=”fab fa-linkedin”></i>
</a>
</li>
<li>
<a href=”https://www.twitter.com”>
<i class=”fab fa-sketch”></i>
</a>
</li>
</ul>
</aside>

Step 4: Add CSS code.

/*
===============
Sidebar
===============
*/
.sidebar-toggle {
position: fixed;
top: 2rem;
right: 3rem;
font-size: 2rem;
background: transparent;
border-color: transparent;
color: var(–clr-primary-5);
transition: var(–transition);
cursor: pointer;
animation: bounce 2s ease-in-out infinite;
}
.sidebar-toggle:hover {
color: var(–clr-primary-7);
}
@keyframes bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}
.close-btn {
font-size: 1.75rem;
background: transparent;
border-color: transparent;
color: var(–clr-primary-5);
transition: var(–transition);
cursor: pointer;
color: var(–clr-red-dark);
}
.close-btn:hover {
color: var(–clr-red-light);
transform: rotate(360deg);
}
.logo {
justify-self: center;
height: 40px;
}

.links a {
display: block;
font-size: 1.5rem;
text-transform: capitalize;
padding: 1rem 1.5rem;
color: var(–clr-grey-5);
transition: var(–transition);
}
.links a:hover {
background: var(–clr-primary-8);
color: var(–clr-primary-5);
padding-left: 1.75rem;
}
.social-icons {
justify-self: center;
display: flex;
padding-bottom: 2rem;
}
.social-icons a {
font-size: 1.5rem;
margin: 0 0.5rem;
color: var(–clr-primary-5);
transition: var(–transition);
}
.social-icons a:hover {
color: var(–clr-primary-1);
}

.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(–clr-white);
display: grid;
grid-template-rows: auto 1fr auto;
row-gap: 1rem;
box-shadow: var(–clr-red-dark);
transition: var(–transition);
transform: translate(-100%);
}
.show-sidebar {
transform: translate(0);
}
@media screen and (min-width: 676px) {
.sidebar {
width: 400px;
}
}