A project contains 5 off-canvas hamburger navigation variations from which you can choose to bring the native app navigation experience to your webpage.
What’s included:
- Variation 1: Push the main content with a parallax effect.
- Variation 2: Shrinks the main content.
- Variation 3: Shrinks the main content in a 3D space.
- Variation 4: Push the main content to the right.
- Variation 5: Animates the navigation when toggled.
How to use it:
Create the html for the navigation & main content.
<div class="page">
<!--navigation-->
<nav class="nav">
<!--close button-->
<div class="nav__close"></div>
<!--navigation list-->
<ul class="nav__list">
<!--navigation item-->
<li class="nav__item">
<!--navigation link--><a class="nav__link" href="#" title="Home">Home</a>
</li>
<!--navigation item-->
<li class="nav__item">
<!--navigation link--><a class="nav__link" href="#" title="About">About</a>
</li>
<!--navigation item-->
<li class="nav__item">
<!--navigation link--><a class="nav__link" href="#" title="Contact">Contact</a>
</li>
</ul>
</nav>
<!--content part-->
<div class="page__content">
<!--open navigation button-->
<div class="nav-open-btn">
<div class="nav-open-btn__bar"></div>
<div class="nav-open-btn__bar"></div>
<div class="nav-open-btn__bar"></div>
</div>
<!--content block-->
<div class="content">
Main Content Here
</div>
</div>
</div>The primary CSS/CSS3 styles.
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
overflow-x: hidden;
}
.page,
.page__content {
position: relative;
}
.page {
min-height: 100vh;
-webkit-perspective: 1500px;
perspective: 1500px;
background-color: rgba(28, 28, 28, 0.5);
}
.page__content {
min-height: 100vh;
background-color: #fff;
}
/* navigation styles */
.nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
padding: 30px;
box-sizing: border-box;
background-color: #1c1c1c;
box-shadow: 4px 0 5px 0 rgba(0, 0, 0, 0.14), 1px 0 10px 0 rgba(0, 0, 0, 0.12), 2px 0 4px -1px rgba(0, 0, 0, 0.3);
z-index: 500;
}
/* nav list styles */
.nav__list {
position: relative;
padding: 0;
margin: 45px 0 0 0;
list-style-type: none;
}
/* nav item styles */
.nav__item:not(:last-child) {
margin-bottom: 20px;
}
/* nav link styles */
.nav__link {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
display: inline-flex;
align-items: center;
color: #fff;
text-decoration: none;
}
.nav__link:hover {
color: #4caf50;
}
/* nav link icon styles */
.nav__link-icon {
position: relative;
top: -3px;
/* !!!use only with material design icons */
margin-right: 10px;
color: currentColor;
}
/* close icon styles */
.nav__close {
position: absolute;
top: 30px;
right: 30px;
width: 40px;
height: 25px;
cursor: pointer;
/* close icon elements */
/* hover effect */
}
.nav__close:before, .nav__close:after {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
display: block;
width: 4px;
height: 28px;
border-radius: 10px;
content: '';
-webkit-transform-origin: center center;
transform-origin: center center;
background-color: #fff;
}
.nav__close:before {
position: absolute;
top: 0;
left: 18px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav__close:after {
position: absolute;
top: 0;
right: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav__close:hover:before, .nav__close:hover:after {
background-color: #4caf50;
}
/* nav open btn styles */
.nav-open-btn {
position: absolute;
top: 30px;
left: 30px;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
width: 35px;
height: 25px;
overflow: hidden;
cursor: pointer;
}
.nav-open-btn.js-hidden {
transition-property: all;
transition-duration: 0s;
transition-timing-function: linear;
transition-delay: 0s;
opacity: 0;
visibility: hidden;
}
.nav-open-btn__bar {
width: 100%;
height: 5px;
background-color: #1c1c1c;
border-radius: 20px;
}
.nav-open-btn__bar:nth-child(1) {
position: absolute;
top: 0;
left: 0;
}
.nav-open-btn__bar:nth-child(2) {
position: absolute;
top: 10px;
left: 0;
}
.nav-open-btn__bar:nth-child(3) {
position: absolute;
top: 20px;
left: 0;
}The CSS for the navigation variations.
/* Demo #1: styles */
.nav--offcanvas-1 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: -300px;
/* opened styles */
}
.nav--offcanvas-1.js-opened {
left: 0;
}
.page__content--offcanvas-1 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: 0;
/* opened styles */
}
.page__content--offcanvas-1.js-opened {
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0s;
left: 300px;
}
/* Demo #2: styles */
.nav--offcanvas-2 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: -300px;
/* opened styles */
}
.nav--offcanvas-2.js-opened {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: 0;
}
.page__content--offcanvas-2 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
-webkit-transform: scale(1) translateX(0);
transform: scale(1) translateX(0);
}
.page__content--offcanvas-2.js-opened {
-webkit-transform: scale(0.8) translateX(150px);
transform: scale(0.8) translateX(150px);
}
/* Demo #3: styles */
.nav--offcanvas-3 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: -300px;
/* opened styles */
}
.nav--offcanvas-3.js-opened {
left: 0;
}
.page__content--offcanvas-3 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
-webkit-transform: rotateY(0deg) translateX(0);
transform: rotateY(0deg) translateX(0);
}
.page__content--offcanvas-3.js-opened {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}
/* Demo #4: styles */
.nav--offcanvas-4 {
transition-property: all;
transition-duration: 0s;
transition-timing-function: linear;
transition-delay: 0s;
max-height: 80%;
-webkit-transform: rotateY(-75deg) translateX(-50px);
transform: rotateY(-75deg) translateX(-50px);
-webkit-transform-origin: left center;
transform-origin: left center;
opacity: 0;
visibility: hidden;
/* opened styles */
}
.nav--offcanvas-4.js-opened {
max-height: 100%;
transition: opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s;
transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s;
transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s;
-webkit-transform: rotateY(0) translateX(0);
transform: rotateY(0) translateX(0);
-webkit-transform-origin: left center;
transform-origin: left center;
opacity: 1;
visibility: visible;
}
.page__content--offcanvas-4 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: 0;
/* opened styles */
}
.page__content--offcanvas-4.js-opened {
left: 300px;
}
/* Demo #5: styles */
.nav--offcanvas-5 {
width: 50%;
opacity: 0;
visibility: hidden;
}
.nav--offcanvas-5.js-opened {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
width: 300px;
opacity: 1;
visibility: visible;
}
.page__content--offcanvas-5 {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
left: 0;
/* opened styles */
}
.page__content--offcanvas-5.js-opened {
left: 300px;
}The necessary JavaScript to enable the navigation.
// hide nav open btn when the nav is open, adding/removing open classes to nav and content
var navOpenBtn = document.querySelector('.nav-open-btn');
var navCloseBtn = document.querySelector('.nav__close');
var nav = document.querySelector('.nav');
var pageContent = document.querySelector('.page__content');
var navList = document.querySelector('.nav__list');
var page = document.querySelector('.page');
// open nav
navOpenBtn.addEventListener('click', function () {
navOpenBtn.classList.add('js-hidden');
nav.classList.add('js-opened');
pageContent.classList.add('js-opened');
});
// close nav
navCloseBtn.addEventListener('click', function () {
navOpenBtn.classList.remove('js-hidden');
nav.classList.remove('js-opened');
pageContent.classList.remove('js-opened');
});
// close navigation if click outside it
page.addEventListener('click', function (e) {
var evTarget = e.target;
if (evTarget !== nav && nav.classList.contains('js-opened') && evTarget !== navOpenBtn && evTarget.parentNode !== navOpenBtn) {
console.log(navOpenBtn.firstChild);
navOpenBtn.classList.remove('js-hidden');
nav.classList.remove('js-opened');
pageContent.classList.remove('js-opened');
}
});See Also:
Simple Sidebar Hamburger Menu In CSS
Responsive Sidebar Navigation With Hamburger Toggle Button
Mobile-friendly Hamburger Navigation With Submenus
Basic Hamburger Toggle Menu With CSS And Vanilla JavaScript
CSS Only Hamburger Toggle Menu
Multi-Direction Offcanvas Drawers with Smooth Sliding Animations
Create Mobile-First Side Menus with SlideReveal.js Library
Hover-triggered Off-Canvas Side Menu – Less Annoying Hotzone