Mobile-first Off-screen Navigation With jQuery - 4PXMMenu
File Size: | 17.7 KB |
---|---|
Views Total: | 3564 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

4PXMMenu is a super simple jQuery plugin that helps you create an off-canvas hamburger toggle menu on mobile devices, utilizing CSS3 transition, transforms and jQuery toggleClass()
method.
How to use it:
1. Create the mobile off-canvas menu from an html unordered list as this:
<div class="mobmenu"> <ul class="menu"> <li><a href="#">Menü</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Menü 3</a></li> <li><a href="#">Menü 4</a></li> <li><a href="#">Menü 5</a></li> </ul> </div>
2. Create a header menu toggle bar:
<header id="ust"> <div id="menuac"> <span></span> </div> </header>
3. Hide the mobile off-canvas menu on desktop.
.mobmenu { display: none; }
4. Wrap the main CSS styles in the CSS3 media queries as this:
@media only screen and (max-width: 768px) { #ust { background: #333; position: fixed; height: 40px; top: 0; left: 0; right: 0; } #ust #menuac { position: absolute; top: 0; right: 0; cursor: pointer; padding: 19px 30px 20px 10px; border-left: 1px solid #666; } #ust #menuac span { cursor: pointer; height: 3px; width: 23px; background: #c9c9c9; position: absolute; display: block; content: ''; transition: all 500ms ease-in-out; } #ust #menuac span:before { cursor: pointer; height: 3px; width: 23px; background: #c9c9c9; position: absolute; display: block; content: ''; top: -7px; transition: all 500ms ease-in-out; } #ust #menuac span:after { cursor: pointer; height: 3px; width: 23px; background: #c9c9c9; position: absolute; display: block; content: ''; bottom: -7px; transition: all 500ms ease-in-out; } #ust #menuac.acik span { background-color: transparent; } #ust #menuac.acik span:before { top: 0px; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); bottom: 0; } #ust #menuac.acik span:after { top: 0; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .mobmenu { position: fixed; left: -300px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; width: 300px; height: 100%; background: #fff; z-index: 9; display: block; } .mobmenu.mobmenu-acik { left: 0; -webkit-box-shadow: 10px 0px 26px -16px rgba(0,0,0,0.75); -moz-box-shadow: 10px 0px 26px -16px rgba(0,0,0,0.75); box-shadow: 10px 0px 26px -16px rgba(0,0,0,0.75); } .mobmenu ul.menu { margin: 0; padding: 0; list-style: none; } .mobmenu ul.menu li a { padding: 10px; display: block; list-style: none; color: #999; border-bottom: 1px solid #ddd; } }
5. Put the latest version of jQuery library at the end of the html document.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
6. The main JavaScript (jQuery script) to toggle CSS classes when the menu is active.
$mobilmenu = $('.mobmenu'); $menuac = $('#menuac'); $menuac.click(function() { $(this).toggleClass('acik'); $('#ust').toggleClass('sagagel'); $mobilmenu.toggleClass('mobmenu-acik'); });
This awesome jQuery plugin is developed by FSahinn. For more Advanced Usages, please check the demo page or visit the official website.