Side Overlay Navigation With jQuery And CSS3
File Size: | 2.11 KB |
---|---|
Views Total: | 3958 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A mobile-friendly off-canvas hamburger navigation that slides from the left of the webpage and covers a specific part of the main content. Build with HTML, CSS3 and a little bit of JavaScript (jQuery).
How to use it:
1. The primary HTML for the side overlay menu.
<div class="side_menu"> <div class="burger_box"> <div class="menu-icon-container"> <a href="#" class="menu-icon js-menu_toggle closed"> <span class="menu-icon_box"> <span class="menu-icon_line menu-icon_line--1"></span> <span class="menu-icon_line menu-icon_line--2"></span> <span class="menu-icon_line menu-icon_line--3"></span> </span> </a> </div> </div> <div class="container"> <h2 class="menu_title">Menu Title</h2> <ul class="list_load"> <li class="list_item"><a href="#">Menu Item 1</a></li> <li class="list_item"><a href="#">Menu Item 2</a></li> <li class="list_item"><a href="#">Menu Item 3</a></li> <li class="list_item"><a href="#">Menu Item 4</a></li> <li class="list_item"><a href="#">Menu Item 5</a></li> ... </ul> </div> </div>
2. The CSS styles for the menu container.
.side_menu { background: rgba(0,20,60,.9); height: 100vh; left: -250px; position: fixed; top: 0; width: 250px; } .side_menu .container { padding: 0 1em; }
3. The required styles for the hamburger toggle button.
.burger_box { display: block; float: right; margin-right: -45px; } .burger_box a.menu-icon { display: inline-block; float: none; height: 25px; padding: 10px; opacity: .5; width: 25px; z-index: 100; } .burger_box a.menu-icon:hover, .burger_box a.menu-icon.opened { opacity: 1; } .burger_box a.menu-icon.opened { background: rgba(0,20,60,.9); } .burger_box .menu-icon_box { display: inline-block; height: 25px; position: relative; text-align: left; width: 25px; } .burger_box .menu-icon_line { background: #fff; border-radius: 2px; display: inline-block; height: 3px; position: absolute; width: 100%; } .burger_box .menu-icon_line--1 { top: 2px; } .burger_box .menu-icon_line--2 { top: 10px; } .burger_box .menu-icon_line--3 { top: 18px; } .burger_box .menu-icon_line--1 { transition: top 200ms 250ms, transform 200ms; -webkit-transition: top 200ms 250ms, -webkit-transform 200ms; } .burger_box .menu-icon_line--2 { transition: opacity 0ms 300ms; -webkit-transition: opacity 0ms 300ms; } .burger_box .menu-icon_line--3 { transition: top 100ms 300ms, transform 200ms; -webkit-transition: top 100ms 300ms, -webkit-transform 200ms; } .burger_box .menu-icon.opened .menu-icon_box { transform: scale3d(0.9, 0.9, 0.9); -webkit-transform: scale3d(0.9, 0.9, 0.9); } .burger_box .menu-icon.opened .menu-icon_line { top: 10px; } .burger_box .menu-icon.opened .menu-icon_line--1 { transform: rotate3d(0, 0, 1, 45deg); -webkit-transform: rotate3d(0, 0, 1, 45deg); transition: top 100ms, transform 200ms 250ms; -webkit-transition: top 100ms, -webkit-transform 200ms 250ms; } .burger_box .menu-icon.opened .menu-icon_line--2 { opacity: 0; transition: opacity 200ms; -webkit-transition: opacity 200ms; } .burger_box .menu-icon.opened .menu-icon_line--3 { transform: rotate3d(0, 0, 1, -45deg); -webkit-transform: rotate3d(0, 0, 1, -45deg); transition: top 200ms, transform 200ms 250ms; -webkit-transition: top 200ms, -webkit-transform 200ms 250ms; }
4. Style & animate the menu items.
.list_load { display: none; list-style: none; padding: 0; } .list_item { margin-left: -20px; opacity: 0; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .list_item a { color: #fff; display: block; padding: 5px 10px; text-decoration: none; } .list_item a:hover { background: rgba(255,255,255,.2); }
5. The core JavaScript to activate the side overlay menu. Copy the following JavaScript snippets and put them after the latest version of jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script>
$(document).on('click','.js-menu_toggle.closed',function(e){ e.preventDefault(); $('.list_load, .list_item').stop(); $(this).removeClass('closed').addClass('opened'); $('.side_menu').css({ 'left':'0px' }); var count = $('.list_item').length; $('.list_load').slideDown( (count*.6)*100 ); $('.list_item').each(function(i){ var thisLI = $(this); timeOut = 100*i; setTimeout(function(){ thisLI.css({ 'opacity':'1', 'margin-left':'0' }); },100*i); }); }); $(document).on('click','.js-menu_toggle.opened',function(e){ e.preventDefault(); $('.list_load, .list_item').stop(); $(this).removeClass('opened').addClass('closed'); $('.side_menu').css({ 'left':'-250px' }); var count = $('.list_item').length; $('.list_item').css({ 'opacity':'0', 'margin-left':'-20px' }); $('.list_load').slideUp(300); });
This awesome jQuery plugin is developed by Jordan. For more Advanced Usages, please check the demo page or visit the official website.