Creating Dead Simple Sliding Menu Quickly (CSS & jQuery)
There are tons of responsive menus out there, but let’s be honest – most of them need tweaking to suit your specific needs. And don’t forget the bloat – many include a pile of styles, scripts, and features you’ll never even use. So why not build your own? This guide walks you through creating a clean, lightweight, and responsive sliding sidebar menu that works beautifully across all screen sizes. It’s easy to integrate, fully customizable, and gives you total control over both functionality and design.
HTML
Here’s the basic structure: a menu overlay, an open button, a close button, and a list of links
<div class="menu-overlay"></div>
<a href="#" class="menu-open">Open Menu</a>
<div class="side-menu-wrapper">
<a href="#" class="menu-close">×</a>
<ul>
<li><a href="https://www.google.com" target="_blank" rel="nofollow">Google Search</a></li>
<li><a href="https://www.yahoo.com" target="_blank" rel="nofollow">Yahoo Search</a></li>
<li><a href="https://www.facebook.com" target="_blank" rel="nofollow">Facebook</a></li>
<li><a href="https://www.flickr.com" target="_blank" rel="nofollow">Flickr</a></li>
</ul>
</div>The CSS
Smooth transitions and layout are handled via CSS. You can position the menu to the left by switching right to left in both the CSS and JS. All you have to do is search->replace all right references to left
.side-menu-wrapper {
background: rgba(0, 0, 0, 0.95);
padding: 40px 0 0 40px;
position: fixed;
top: 0;
right: 0; /* "left" to position menu on left side */
height: 100%;
width: 250px;
font: 20px 'Courier New', Courier, monospace;
box-sizing: border-box;
z-index: 2000;
transition: right 0.5s ease; /* "left" to position menu on left side */
}
.side-menu-wrapper ul {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
height: 95%;
}
.side-menu-wrapper ul li a {
display: block;
padding: 8px 12px;
border-bottom: 1px solid #222;
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.side-menu-wrapper ul li a:hover {
color: #fff;
}
.side-menu-wrapper .menu-close {
font-size: 30px;
color: #aaa;
text-decoration: none;
display: block;
margin-bottom: 20px;
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
z-index: 1000;
transition: opacity 0.5s ease, width 0s linear 0.5s;
}
.menu-overlay.active {
width: 100%;
opacity: 1;
transition: opacity 0.5s ease;
}jQuery
We use jQuery to slide the menu in and out. You could also do this with plain JavaScript.
jQuery(function ($) {
const slideMenu = $('.side-menu-wrapper');
const openBtn = $('.menu-open');
const closeBtn = $('.menu-close');
const overlay = $('.menu-overlay');
const position = 'right'; // 'left' or 'right' menu position
const prop = {};
prop[position] = `-${slideMenu.outerWidth()}px`;
prop.display = 'block';
// Initial state
slideMenu.css(prop);
openBtn.on('click', function (e) {
e.preventDefault();
const openPos = {};
openPos[position] = '0';
slideMenu.css(openPos).addClass('active');
overlay.addClass('active');
});
closeBtn.on('click', function (e) {
e.preventDefault();
const closePos = {};
closePos[position] = `-${slideMenu.outerWidth()}px`;
slideMenu.css(closePos).removeClass('active');
overlay.removeClass('active');
});
overlay.on('click', function () {
const closePos = {};
closePos[position] = `-${slideMenu.outerWidth()}px`;
slideMenu.css(closePos).removeClass('active');
overlay.removeClass('active');
});
$(document).on('keydown', function (e) {
if (e.key === 'Escape' && slideMenu.hasClass('active')) {
const closePos = {};
closePos[position] = `-${slideMenu.outerWidth()}px`;
slideMenu.css(closePos).removeClass('active');
overlay.removeClass('active');
}
});
});Vanilla Script
Prefer plain JavaScript? No problem! You can achieve the same effect with pure vanilla JavaScript. No jQuery, no dependencies – just lightweight, native code that works seamlessly across modern browsers.
<script>
document.addEventListener('DOMContentLoaded', function () {
const slideMenu = document.querySelector('.side-menu-wrapper');
const openBtn = document.querySelector('.menu-open');
const closeBtn = document.querySelector('.menu-close');
const overlay = document.querySelector('.menu-overlay');
const position = 'right'; // 'left' or 'right' menu position
// Utility to get width
const getMenuWidth = () => slideMenu.offsetWidth;
// Set initial off-screen position
slideMenu.style[position] = `-${getMenuWidth()}px`;
slideMenu.style.display = 'block';
openBtn.addEventListener('click', function (e) {
e.preventDefault();
slideMenu.style[position] = '0';
slideMenu.classList.add('active');
overlay.classList.add('active');
});
closeBtn.addEventListener('click', function (e) {
e.preventDefault();
slideMenu.style[position] = `-${getMenuWidth()}px`;
slideMenu.classList.remove('active');
overlay.classList.remove('active');
});
overlay.addEventListener('click', function () {
slideMenu.style[position] = `-${getMenuWidth()}px`;
slideMenu.classList.remove('active');
overlay.classList.remove('active');
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && slideMenu.classList.contains('active')) {
slideMenu.style[position] = `-${getMenuWidth()}px`;
slideMenu.classList.remove('active');
overlay.classList.remove('active');
}
});
});
</script>Final Thoughts
This menu is easy to customize – tweak the width, colors, font, or even turn it into a left-sliding panel. You can also disable body scrolling when active or add a fade effect on the menu content. With a solid base like this, the possibilities are endless. Let me know what’s your thoughts on this and how you may have used this snippt!
