App-style Sliding Menu with jQuery and CSS3
File Size: | 1.93 KB |
---|---|
Views Total: | 3435 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A super simple and lightweight jQuery script used to create a mobile app style sliding menu with an animated hamburger toggle icon.
How to use it:
1. Create the Html for the sliding menu.
<div id="navigator"> <ul id="nav"> <li class="nav_tab"> <a href="#"> <p>Home</p> </a> </li> <li class="nav_tab"> <a href="#"> <p>Services</p> </a> </li> <li class="nav_tab"> <a href="#"> <p>Works</p> </a> </li> <li class="nav_tab"> <a href="#"> <p>Contact</p> </a> </li> <li class="nav_tab"> <a href="#"> <p>Blog</p> </a> </li> </ul> </div>
2. The core CSS/CSS3 styles for the sliding menu.
#navigator { width: 250px; height: 100%; position: fixed; top: 0; left: -250px; background: rgba(52, 152, 219,0.7); float: left; z-index: 10; } #nav { width: 250px; height: auto; display: block; margin: 0; padding: 0; } .nav_tab { width: 250px; height: 50px; display: block; } .nav_tab a p { color: rgba(255,255,255,0.8); font-size: 18px; padding: 15px 0; text-align: center; transition: 0.35s ease; -webkit-transition: 0.35s ease; -moz-transition: 0.35s ease; } .nav_tab a p:hover { background: rgba(255,255,255,0.9); color: rgba(0,0,0,1); letter-spacing: 2px; transition: 0.35s ease; -webkit-transition: 0.35s ease; -moz-transition: 0.35s ease; }
3. Create the Html for a menu icon to toggle the sliding menu.
<div class="menu-icon"> <div class="line_one"></div> <div class="line_two"></div> <div class="line_three"></div> </div>
4. Add the hamburger transition effect to the menu icon.
.menu-icon { width: 150px; height: 35px; position: fixed; top: 0; left: 0px; margin: 10px; z-index: 10; } .menu-text { width: 50px; height: 35px; font-size: 30px; color: #e67e22; display: block; position: fixed; top: 0; left: 50px; margin: 10px; z-index: 9; } .menu-icon div { width: 40px; height: 5px; background: #e67e22; margin: 5px; transition: all 0.35s; border-radius: 2px; } .on .line_one { transform: rotate(45deg) translate(7px, 7px); } .on .line_two { opacity: 0; } .on .line_three { transform: rotate(-45deg) translate(7px, -7px); }
5. Load the latest version of jQuery JavaScript library in your document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
6. Enable the sliding menu with a little bit JavaScript.
$(document).ready(function () { $('.menu-icon').click(function () { if ($('#navigator').css("left") == "-250px") { $('#navigator').animate({left: '0px'}, 350); $('.menu-icon').animate({left: '250px'}, 350); $('.menu-text').animate({left: '300px'}, 350).empty().text("Close"); } else { $('#navigator').animate({left: '-250px'}, 350); $(this).animate({left: '0px'}, 350); $('.menu-text').animate({left: '50px'}, 350).empty().text("Menu"); } }); $('.menu-icon').click(function () { $(this).toggleClass("on"); }); });
This awesome jQuery plugin is developed by Iulius90. For more Advanced Usages, please check the demo page or visit the official website.