"menu"
Bootstrap 3.3.0 Snippet by ravindra93

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="nav-wrapper"> <a href="#" class="js-nav-toggle"> <span></span> </a> <nav role="navigation"> <div class="nav-toggle"> <span class="nav-back"></span> <span class="nav-title">Menu</span> <span class="nav-close"></span> </div> <ul> <li class="has-dropdown"> <a href="#">Category</a> <ul> <li><a href="#">Cat 1</a></li> <li><a href="#">Cat 2</a></li> <li><a href="#">Cat 3</a></li> <li><a href="#">Cat 4</a></li> <li><a href="#">Cat 5</a></li> <li><a href="#">Cat 6</a></li> <li><a href="#">Cat 7</a></li> </ul> </li> <li class="has-dropdown"> <a href="#">Apparel</a> <ul> <li class="has-dropdown"> <a href="#">Loremus</a> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> <li><a href="#">Aliquam</a></li> <li><a href="#">Vestibulum</a></li> </ul> </li> <li> <a href="#">Clients</a> </li> <li class="has-dropdown"> <a href="#">Contact Us</a> <ul> <li class="has-dropdown"> <a href="#">By mail</a> <ul> <li><a href="#">mail 1</a></li> <li><a href="#">mail 2</a></li> <li><a href="#">mail 3</a></li> </ul> </li> <li><a href="#">Anything</a></li> <li><a href="#">Tester</a></li> </ul> </li> </ul> </nav> </div>
.debugger { position: absolute; left: 50%; top: 0; } * { margin: 0; box-sizing: border-box; font-family: "Open Sans", Arial, sans-serif; } .nav-wrapper { position: relative; width: 300px; height: 100vh; transition: transform 0.3s; transform: translateX(-100%); } .nav-wrapper.show-menu { transform: none; } .js-nav-toggle { position: absolute; top: 0; right: -60px; width: 43px; height: 40px; margin: 15px 0 0 15px; display: block; float: left; padding: 0; color: #345; border: 2px solid #345; z-index: 2; } .js-nav-toggle span { position: relative; background-color: #345; height: 2px; display: block; width: 22px; margin: 17px auto 0; transition: all 0.4s; transition-delay: 0.3s; } .js-nav-toggle span:before, .js-nav-toggle span:after { content: ''; position: absolute; display: block; width: 20px; height: 0; left: 1px; top: 50%; margin-top: -7px; transition: all 0.3s 0.3s; } .js-nav-toggle span:before { box-shadow: 0 14px 0 1px #345; } .js-nav-toggle span:after { box-shadow: 0 0 0 1px #345; } .show-menu .js-nav-toggle span { background-color: transparent; } .show-menu .js-nav-toggle span:before { transform: rotate(-45deg); } .show-menu .js-nav-toggle span:after { transform: rotate(45deg); } .show-menu .js-nav-toggle span:before, .show-menu .js-nav-toggle span:after { margin-top: 0; box-shadow: 0 0 0 1px #345; } nav { position: absolute; left: 0; top: 0; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; box-shadow: 0 0 5px 1px #ddd; background-color: #fafafa; } nav .nav-toggle { position: absolute; top: 0; left: 0; width: 100%; padding: 0.45em 0.6em; background-color: #456; color: #fff; z-index: 100; cursor: pointer; transition: backgroun-color 0.2s; } nav .nav-toggle:hover { background-color: #345; } nav .nav-toggle.back-visible .nav-back { opacity: 1; } nav .nav-toggle.back-visible .nav-title { transform: translateX(40px); } nav .nav-title { position: absolute; left: 0; top: 0.8em; padding-left: 0.7em; transition: transform 0.3s; } nav .nav-back { display: inline-block; position: relative; width: 30px; height: 30px; vertical-align: middle; z-index: 1; opacity: 0; transition: opacity 0.2s; } nav .nav-back:before, nav .nav-back:after { content: ''; position: absolute; top: 50%; } nav .nav-back:before { left: 50%; width: 9px; height: 9px; border: 2px solid currentcolor; border-right-color: transparent; border-bottom-color: transparent; transform: translate(-50%, -50%) rotateZ(-45deg); } nav .nav-back:after { left: 28%; width: 15px; height: 2px; background-color: currentcolor; margin-top: -1px; } nav a { display: block; position: relative; padding: 0.7em; border-bottom: 1px solid #eee; color: #999; text-decoration: none; transition: color 0.15s, background-color 0.15s; } nav a:hover { color: #333; background-color: #efefef; } nav ul { list-style: none; padding: 45px 0 0; transition: transform 0.3s; background-color: #fafafa; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } nav ul ul { display: none; left: 100%; } nav li.has-dropdown > a { padding-right: 2.5em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } nav li.has-dropdown > a:after { content: ''; position: absolute; top: 50%; right: 1em; width: 9px; height: 9px; border: 1px solid currentcolor; border-left-color: transparent; border-top-color: transparent; transform: translateY(-90%) rotateZ(-45deg); transition: transform 0.3s; transform-origin: 100%; } nav li.nav-dropdown-open ul { display: block; }
(function($) { this.MobileNav = function() { this.curItem, this.curLevel = 0, this.transitionEnd = _getTransitionEndEventName(); var defaults = { initElem: ".main-menu", menuTitle: "Menu" } // Check if MobileNav was initialized with some options and assign them to the "defaults" if (arguments[0] && typeof arguments[0] === "object") { this.options = extendDefaults(defaults, arguments[0]); } // Add to the "defaults" ONLY if the key is already in the "defaults" function extendDefaults(source, extender) { for (option in extender) { if (source.hasOwnProperty(option)) { source[option] = extender[option]; } } } MobileNav.prototype.getCurrentItem = function() { return this.curItem; }; MobileNav.prototype.setMenuTitle = function(title) { defaults.menuTitle = title; _updateMenuTitle(this); return title; }; // Init is an anonymous IIFE (function(MobileNav) { var initElem = ($(defaults.initElem).length) ? $(defaults.initElem) : false; if (initElem) { defaults.initElem = initElem; _clickHandlers(MobileNav); _updateMenuTitle(MobileNav); } else { console.log(defaults.initElem + " element doesn't exist, menu not initialized."); } }(this)); function _getTransitionEndEventName() { var i, undefined, el = document.createElement('div'), transitions = { 'transition': 'transitionend', 'OTransition': 'otransitionend', // oTransitionEnd in very old Opera 'MozTransition': 'transitionend', 'WebkitTransition': 'webkitTransitionEnd' }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } } }; function _clickHandlers(menu) { defaults.initElem.on('click', '.has-dropdown > a', function(e) { e.preventDefault(); menu.curItem = $(this).parent(); _updateActiveMenu(menu); }); defaults.initElem.on('click', '.nav-toggle', function() { _updateActiveMenu(menu, 'back'); }); }; // TODO: Make this DRY (deal with waiting for transitionend event) function _updateActiveMenu(menu, direction) { _slideMenu(menu, direction); if (direction === "back") { /*defaults.initElem.children('ul').one(menu.transitionEnd, function(e) { menu.curItem.removeClass('nav-dropdown-open nav-dropdown-active'); menu.curItem = menu.curItem.parent().closest('li'); menu.curItem.addClass('nav-dropdown-open nav-dropdown-active'); _updateMenuTitle(menu); });*/ menu.curItem.removeClass('nav-dropdown-open nav-dropdown-active'); menu.curItem = menu.curItem.parent().closest('li'); menu.curItem.addClass('nav-dropdown-open nav-dropdown-active'); _updateMenuTitle(menu); } else { menu.curItem.addClass('nav-dropdown-open nav-dropdown-active'); _updateMenuTitle(menu); } }; // Update main menu title to be the text of the clicked menu item function _updateMenuTitle(menu) { var title = defaults.menuTitle; if (menu.curLevel > 0) { title = menu.curItem.children('a').text(); defaults.initElem.find('.nav-toggle').addClass('back-visible'); } else { defaults.initElem.find('.nav-toggle').removeClass('back-visible'); } $('.nav-title').text(title); }; // Slide the main menu based on current menu depth function _slideMenu(menu, direction) { if (direction === "back") { menu.curLevel = (menu.curLevel > 0) ? menu.curLevel - 1 : 0; } else { menu.curLevel += 1; } defaults.initElem.children('ul').css({ "transform": "translateX(-" + (menu.curLevel * 100) + "%)" }); }; } }(jQuery)); $(document).ready(function() { var MobileMenu = new MobileNav({ initElem: "nav", menuTitle: "Push menu demo", }); $('.js-nav-toggle').on('click', function(e) { e.preventDefault(); $('.nav-wrapper').toggleClass('show-menu'); }); });

Related: See More


Questions / Comments: