Author: | ryanmorr |
---|---|
Views Total: | no views |
Official Page: | Go to website |
Last Update: | June 20, 2015 |
License: | MIT |
Preview:

Description:
A mobile-friendly off-canvas push menu with a hamburger toggle button built using CSS3 and a little JavaScript magic.
How to use it:
Create an off-canvas sidebar menu following the markup as shown below.
<aside class="sidebar"> <nav class="nav"> <ul class="nav-items"> <li class="nav-title">Pages</li> <li><a href="#" class="nav-link">Home</a></li> <li><a href="#" class="nav-link">Products</a></li> <li><a href="#" class="nav-link">Services</a></li> <li><a href="#" class="nav-link">About</a></li> <li><a href="#" class="nav-link">News</a></li> </ul> <div class="sidebar-separator"></div> <ul class="nav-items"> <li class="nav-title">More</li> <li><a href="#" class="nav-link">Contact</a></li> <li><a href="#" class="nav-link">Support</a></li> <li><a href="#" class="nav-link">Careers</a></li> </ul> </nav> </aside>
Create a hamburger button to toggle the off-canvas menu.
<div class="hamburger"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div>
Wrap the main content together with the off-canvas menu and hamburger toggle button in a container. The whole markup structure should be like this:
<div class="container"> <main class="main" role="main"> Main Content Goes Here </main> <aside class="sidebar"> <nav class="nav"> <ul class="nav-items"> <li class="nav-title">Pages</li> <li><a href="#" class="nav-link">Home</a></li> <li><a href="#" class="nav-link">Products</a></li> <li><a href="#" class="nav-link">Services</a></li> <li><a href="#" class="nav-link">About</a></li> <li><a href="#" class="nav-link">News</a></li> </ul> <div class="sidebar-separator"></div> <ul class="nav-items"> <li class="nav-title">More</li> <li><a href="#" class="nav-link">Contact</a></li> <li><a href="#" class="nav-link">Support</a></li> <li><a href="#" class="nav-link">Careers</a></li> </ul> </nav> </aside> <div class="hamburger"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> </div>
The basic CSS styles.
html { box-sizing: border-box; overflow: hidden; } *, *:before, *:after { box-sizing: inherit; } html, body { height: 100%; } body { background: #fff; font-family: 'Roboto', sans-serif; line-height: 1.5em; color: #888; } .container { position: relative; overflow-x: hidden; height: 100%; width: 100%; }
The CSS for the main content.
.main { height: 100%; position: relative; transition-property: transform; } .content { margin: 50px 50px; }
The CSS for the off-canvas sidebar menu.
.sidebar { position: fixed; z-index: 5; top: 0; left: 0; height: 100%; width: 260px; background: #1d2127; border-right: 3px solid #0f1114; overflow: hidden; -webkit-transform: translate3d(-260px, 0, 0); transform: translate3d(-260px, 0, 0); transition-property: transform; } .sidebar, .sidebar a { color: #abb4be; } .nav { margin-top: 100px; } .nav-items { margin: 0; padding: 0; list-style: none; } .nav-title { display: block; padding: 10px 50px; text-transform: uppercase; font-weight: 600; color: #465162; } .nav-link { display: block; padding: 10px 50px; text-decoration: none; transition: background-color 0.3s ease; } .nav-link:hover { background-color: #282d36; } .sidebar-separator { margin: 30px; height: 2px; background-color: #000; border-bottom: 1px solid #2b313a; }
The CSS for the hamburger toggle button.
.hamburger { display: block; position: fixed; left: 50px; top: 20px; cursor: pointer; z-index: 10; border-radius: 5px; background-color: #3498db; border: 2px solid #ddd; padding: 10px 7px; width: 50px; height: 46px; transition-property: background-color, border-color; } .bar { display: block; position: relative; background-color: #ddd; width: 100%; height: 4px; border-radius: 2px; margin: 0 auto; transition-property: transform, opacity, background-color, width; } .bar:first-child { top: 0; } .bar:nth-child(2) { opacity: 1; } .bar:last-child { bottom: 0; } .hamburger:hover { border-color: #fff; } .hamburger:hover .bar { background-color: #fff; } .bar + .bar { margin-top: 5px; }
The CSS to show the off-canvas sidebar menu.
.main, .sidebar, .hamburger, .bar { transition-duration: 0.3s; transition-timing-function: ease-in-out; } .show-sidebar .main { -webkit-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); } .show-sidebar .sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .show-sidebar .hamburger { background-color: #282d36; border-color: #0f1114; } .show-sidebar .bar { background-color: #abb4be; } .show-sidebar .bar:first-child { width: 120%; -webkit-transform: rotate(45deg) translate(5px, 8px); transform: rotate(45deg) translate(5px, 8px); } .show-sidebar .bar:nth-child(2) { opacity: 0; } .show-sidebar .bar:last-child { width: 120%; -webkit-transform: rotate(-45deg) translate(4px, -8px); transform: rotate(-45deg) translate(4px, -8px); }
The core JavaScript.
var container = document.querySelector('.container'); var main = document.querySelector('.main'); function toggleSidebar(){ isShowingSidebar() ? hideSidebar() : showSidebar(); } function showSidebar(){ container.classList.add('show-sidebar'); } function hideSidebar(){ container.classList.remove('show-sidebar'); } function isShowingSidebar(){ return container.classList.contains('show-sidebar'); } document.querySelector('.hamburger').addEventListener('click', toggleSidebar, false); container.addEventListener('click', function(e){ if(isShowingSidebar() && main.contains(e.target)){ e.preventDefault(); hideSidebar(); } }, true);
how to add scrolling to the menu