Interactive Off-canvas Overlay Menu With jQuery And CSS3
File Size: | 3.68 KB |
---|---|
Views Total: | 4646 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An interactive, mobile-friendly site navigation that allows to show/hide an off-canvas sidebar overlay menu / panel based on user actions.
How to use it:
1. Create the mobile navigation together with the menu toggle links as follow:
<nav class="nav-container"> <ul class="nav-menu"> <li class='nav-close-menu-li'><a href='#'>X</a> <a href='#'>Close Menu</a></li> <li><a href='#'>Home</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>Contact</a></li> </ul> <div class='nav-link-container'> <a href='#' class="nav-menu-link"></a> </div> </nav>
2. Style the mobile navigation in the CSS.
.nav-link-container { -moz-border-radius: 30px/30px; -webkit-border-radius: 30px 30px; border-radius: 30px/30px; width: 30px; height: 30px; background: white; float: right; margin-right: 3%; margin-top: 20px; position: absolute; margin-left: 27%; } .nav-menu-link { border-bottom: 5px double #4682B4; border-top: 2px solid #4682B4; height: 2px; width: 10px; position: absolute; margin-left: 10px; margin-top: 10px; } .nav-menu { float: right; background: white; list-style: none; width: 100%; height: 100%; margin: 0; padding-left: 0; font-family: Verdana, Helvetica, Arial; font-size: 11px; -ms-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; transition: transform 0.4s ease; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } .nav-inactive-menu-link-container { display: none; } .nav-active-menu-container { -ms-transform: translate(0); -webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0); } .nav-menu li { padding-left: 20px; height: 40px; border-bottom: 2px solid #f2f2f2; } .nav-menu li a { text-decoration: none; line-height: 40px; color: #b3b3b3; font-weight: bold; } .nav-menu li a:hover { color: #4682B4; } .nav-close-menu-li { background: #4682B4; display: block; } .nav-close-menu-li a { color: white !important; }
3. Position the mobile navigation.
.nav-container { float: right; margin-top: 0; width: 30%; }
4. Set the background color of the fullscreen overlay when the navigation is opened.
.inactive-body { background: rgba(0, 0, 0, 0.7); }
5. The mobile navigation requires jQuery library loaded properly in the document.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
6. The main JavaScript (jQuery script) to active the mobile navigation by toggling the CSS classes as shown below.
$( "body" ).click(function(event){ if( $(".nav-menu").hasClass("nav-active-menu-container") && $(".nav-link-container").hasClass("nav-inactive-menu-link-container") ) { $(".nav-menu").toggleClass("nav-active-menu-container"); $(".content").toggleClass("inactive-body"); } }); $(".nav-close-menu-li > a").click(function(event){ $(".nav-menu").toggleClass("nav-active-menu-container"); $(".content").toggleClass("inactive-body"); }); $(".nav-menu").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e) { if(! $(".nav-menu").hasClass("nav-active-menu-container") ) $(".nav-link-container").toggleClass("nav-inactive-menu-link-container"); else $(".content").toggleClass("inactive-body"); }); $( ".nav-link-container > a" ).click(function(event){ $(".nav-link-container").toggleClass("nav-inactive-menu-link-container"); $(".nav-menu").toggleClass("nav-active-menu-container"); });
This awesome jQuery plugin is developed by mohd-ahsan-mirza. For more Advanced Usages, please check the demo page or visit the official website.