Responsive Multi-Level Off-canvas Navigation Plugin - Navpad Menu
File Size: | 3.25 KB |
---|---|
Views Total: | 2965 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A stylish responsive jQuery navigation script that converts a horizontal navigation bar into a toggleable off-canvas menu on small screen devices, based on CSS3 media queries.
Basic Usage:
1. Create a multi-level navigation system using nested html unordered lists. The whole markup should be like this:
<div id="menu"> <div class="menu-toggler"><span>I'm a toggle button</span></div> <div class="responsive-menu"> <div id="navigator"> <ul class="nav"> <li class="title">I'm a menu title</li> <li><a href="#" style="border:none;">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#container">Categories</a> <ul> <li><a href="#">Menu Plugins</a></li> <li><a href="#">Chart Plugins</a></li> <li><a href="#container">Slider Plugins</a> <ul> <li><a href="#">Range Slider</a></li> <li><a href="#">Content Slider</a> <ul> <li><a href="#">Image Slider</a></li> <li><a href="#">Any Slider</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#" title="#" class="parent">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Social</a></li> <li><a href="#">Showcase</a></li> </ul> </div> </div> </div>
2. The required CSS/CSS3 rules for the horizontal navigation bar on large screen devices(min width: 641px).
@media handheld, screen and (min-width: 641px) { .no_scroll { overflow-y: hidden; } .menu-toggler { display: none; } #menu { max-width: 960px; height: 50px; margin: 0 auto; } #navigator { height: 50px; line-height: 50px; box-shadow: 0 7px 6px -7px #373435; -webkit-box-shadow: 0 7px 6px -7px #373435; -moz-box-shadow: 0 7px 6px -7px #373435; } #navigator .title { display: none; } #navigator ul { list-style: none; } #navigator > ul > li { width: 14.28%; float: left; } #navigator > ul > li > a { color: #fefefe; font-size: 15px; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; display: block; background: #333; } #navigator > ul > li:hover > a { background: #555; } #navigator ul li > ul, #navigator ul li li > ul, #navigator ul li li li > ul, #navigator ul li li li li> ul, #navigator ul li li li li li > ul { display: none; } #navigator ul li:hover > ul, #navigator ul li li:hover > ul, #navigator ul li li li:hover > ul, #navigator ul li li li li:hover > ul, #navigator ul li li li li li:hover > ul { position: absolute; z-index: 10; width: 180px; line-height: 20px; display: block; background: #555; box-shadow: 0 7px 6px -7px #373435; -webkit-box-shadow: 0 7px 6px -7px #373435; -moz-box-shadow: 0 7px 6px -7px #373435; } #menu ul ul li ul { top: 0; left: 179px; min-height: 100%; border-left: 1px solid #444; } #menu ul ul li { /*position: relative;*/ } #menu ul ul li a { color: #fefefe; font-size: 14px; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; display: block; padding: 12px 7px; border-top: 1px solid rgba(255,255,255,0.045); border-bottom: 1px solid rgba(0,0,0,0.045); text-transform: uppercase; } #menu ul ul li:hover > a { background: #444; } #menu ul ul li li:hover > a { } #menu ul ul li li li:hover > a { } #menu ul ul li li li li:hover > a { } #menu ul ul li li li li li:hover > a { } }
3. The required CSS/CSS3 rules for the off-canvas menu with toggle icon & menu title on small screen devices.
@media handheld, screen and (max-width: 640px) { .menu-toggler { display: block; } .menu-toggler span { color: #fefefe; font-size: 20px; font-family: 'Open Sans Condensed', sans-serif; text-align: center; letter-spacing: 5px; position: absolute; z-index: 99; top: 0; left: 0; width: 100%; height: 50px; line-height: 50px; margin: 0 auto; display: block; cursor: pointer; background: #333 url() no-repeat 10px center; box-shadow: 0 7px 3px -7px #373435; -webkit-box-shadow: 0 7px 3px -7px #373435; -moz-box-shadow: 0 7px 3px -7px #373435; } .open > .menu-toggler { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: rgba(225,225,225,0.85); } .open > .menu-toggler span { opacity: 0.1 !important; } .responsive-menu { position: fixed; z-index: 99; top: 0; left: -300px; width: 300px; height: 100%; overflow-x: hidden; overflow-y: scroll; background: #555; transition: 0.3s; box-shadow: -4px 0 15px 0px #373435; -webkit-box-shadow: -4px 0 15px 0px #373435; -moz-box-shadow: -4px 0 15px 0px #373435; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .open > .responsive-menu { left: 0; } #navigator .title { color: #666; font-size: 20px; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; text-shadow: 0.8px 0.8px 3px #111; height: 60px; line-height: 62px; display: block; padding: 0 20px; border-bottom: 1px solid rgba(0,0,0,0.045); background: #333 url() no-repeat 20px center; box-shadow: -4px 0 5px 0px #373435; -webkit-box-shadow: -4px 0 5px 0px #373435; -moz-box-shadow: -4px 0 5px 0px #373435; } #navigator ul li > ul, #navigator ul li li > ul, #navigator ul li li li > ul, #navigator ul li li li li > ul, #navigator ul li li li li li > ul { position: relative; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; border: none; background: rgba(0,0,0,0.1); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } #navigator ul li { float: none; display: block; } #navigator ul li a { color: #999; font-size: 14px; display: block; padding: 20px; border-top: 1px solid rgba(255,255,255,0.045) !important; border-bottom: 1px solid rgba(0,0,0,0.045) !important; } #navigator > ul > li:hover > a { color: #aaa; background: #444; } #navigator > ul > li > .parent, #navigator > ul > li:hover > .parent, #navigator > ul > li.hover > .parent, #navigator ul li li > .parent, #navigator ul li li:hover > .parent, #navigator ul li li.hover > .parent { background-repeat: no-repeat; background-position: 260px center; } #navigator > ul > li > .parent, #navigator > ul > li:hover > .parent { color: #aaa; background-color: inherit; background-image: url(); } #navigator > ul > li.hover > .parent { color: #aaa; background-color: #444; background-image: url(); } #navigator ul li li a { color: #aaa; font-size: 12px; } #navigator ul li li > .parent, #navigator ul li li:hover > .parent { color: #aaa; background-color: inherit; background-image: url(); } #navigator ul li li.hover > .parent { color: #aaa; background-color: rgba(0,0,0,0.1); background-image: url(); } .nav ul { display: none; left: -9999px; } .nav li.hover > ul, .nav li li.hover > ul, .nav li li li.hover > ul, .nav li li li li.hover > ul, .nav li li li li li.hover > ul, .nav li li li li li li.hover > ul { position: static !important; display: block !important; } } @media handheld, screen and (max-width: 480px) { .open > .responsive-menu { width: 250px; } #menu > ul > li > .parent, #menu > ul > li:hover > .parent, #menu > ul > li.hover > .parent, #menu ul li li > .parent, #menu ul li li:hover > .parent, #menu ul li li.hover > .parent { background-repeat: no-repeat; background-position: 210px center; } } @media handheld, screen and (max-width: 319px) { .open > .responsive-menu { width: 200px; } #menu > ul > li > .parent, #menu > ul > li:hover > .parent, #menu > ul > li.hover > .parent, #menu ul li li > .parent, #menu ul li li:hover > .parent, #menu ul li li.hover > .parent { background-repeat: no-repeat; background-position: 150px center; } }
4. Include the latest version of jQuery JavaScript library from a CDN.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
5. The JavaScript to enable the responsive off-canvas menu.
jQuery.noConflict(); jQuery(document).ready(function($){ $('.abrir_menu').click(function(){ $("body").toggleClass('no_scroll'); }); }); jQuery.noConflict(); jQuery(document).ready(function($){ $(function() { initDropDowns($("#menu")); }); function initDropDowns(allMenus) { allMenus.children(".abrir_menu").on("click", function() { var thisTrigger = jQuery(this), thisMenu = thisTrigger.parent(), thisPanel = thisTrigger.next(); if(thisMenu.hasClass("open")){ thisMenu.removeClass("open"); jQuery(document).off("click"); thisPanel.off("click"); } else{ allMenus.removeClass("open"); thisMenu.addClass("open"); jQuery(document).on("click", function() { allMenus.removeClass("open"); }); thisPanel.on("click", function(e) { e.stopPropagation(); }); } return false; }); } }); jQuery.noConflict(); jQuery(document).ready(function($){ $(document).ready(function() { $(".nav li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent"); }; }) }) $(function(){ $(".nav li").unbind('mouseenter mouseleave'); $(".nav li a.parent").unbind('click').bind('click', function(e) { e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); }); });
This awesome jQuery plugin is developed by guipaduaan. For more Advanced Usages, please check the demo page or visit the official website.