Minimal Off-canvas Navigation with jQuery and CSS3
File Size: | 6.29 KB |
---|---|
Views Total: | 1349 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A minimalist jQuery & CSS3 implementation of mobile-friendly navigation that automatically collapses a regular navigation into an off-canvas menu on smaller viewports.
How to use it:
1. Load jQuery library and other necessary resources in your Html page.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2. Create a mobile friendly navigation menu for your webpage following the html structure like this:
<div id="site-wrapper"> <div id="site-canvas"> <div id="site-menu"> <ul class="menu-items"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> <div class="row" id="navbar"> <div class="col-xs-12"> <div class="col-xs-3 col-md-2" id="brand"> BRAND </div> <div class="visible-lg"> <div class="col-md-10"> <ul class="items"> <li class="item">Home</li> <li class="item">About</li> <li class="item">Contact</li> </ul> </div> </div> <div class="hidden-lg"> <a href="#" class="toggle-nav"> <i class="fa fa-bars fa-2x"></i> </a> </div> </div> </div> <div class="container" id="page-content"> Main Content goes here... </div> </div> </div>
3. The basic styles for the off-canvas menu.
#site-wrapper { position: relative; overflow: hidden; width: 100%; } #site-canvas { width: 100%; height: 100%; position: relative; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: 300ms ease all; transition: 300ms ease all; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .show-nav #site-canvas { -webkit-transform: translateX(-200px); transform: translateX(-200px); -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } #site-menu { width: 200px; height: 1000px; position: absolute; top: 0; right: -200px; background: #F5766E; padding-top: 28px; color: white; text-align: center; } #site-menu ul { text-align: center; list-style-type: none; display: inline-block; font-family: "roboto"; font-size: 20px; } #site-menu ul li { padding: 5px; }
4. The core JavaScript function.
function toggleNav() { if ($('#site-wrapper').hasClass('show-nav')) { $('#site-wrapper').removeClass('show-nav'); } else { $('#site-wrapper').addClass('show-nav'); } }
5. Toggle the off-canvas navigation on click.
$(function() { $('.toggle-nav').click(function() { toggleNav(); }); });
This awesome jQuery plugin is developed by himmel. For more Advanced Usages, please check the demo page or visit the official website.