A jQuery & CSS3 based off-canvas navigation menu that pushes the main page to the right when toggled.
How to use it:
1. Create an off-canvas menu with a close menu as follows.
<div class="menu">
<!-- <a href="http://www.jqueryscript.net/menu/">Menu</a> icon -->
<div class="icon-close"> <img src="close.png"> </div>
<!-- Menu -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
2. Wrap your main content and the menu toggle button into a container.
<div class="main-content">
<div class="icon-menu">
Toggle Menu
</div>
...
</div>
3. The basic CSS styles for the off-canvas menu.
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.menu {
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
4. Include the necessary jQuery library at the end of the document.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
5. Enable the push menu.
var main = function() { $('.icon-menu').click( function() { $('.menu').animate( { left: '0px' }, 200); $('body').animate( { left: '285px' }, 200); }); $('.icon-close').click( function() { $('.menu').animate( { left: '-285px' }, 200); $('body').animate({ left: "0px" }, 200); }); }; $(document).ready(main);
This awesome jQuery plugin is developed by renhades. For more Advanced Usages, please check the demo page or visit the official website.
下载: Minimalist-Responsive-Push-Menu-with-jQuery-CSS3
原文: http://www.jqueryscript.net/menu/Minimalist-Responsive-Push-Menu-with-jQuery-CSS3.html
本文: jQuery版侧边栏菜单 Minimalist Responsive Push Menu with jQuery and CSS3