Simple jQuery Slide Up Menu Plugin - Slideup Menu
File Size: | 82.1 KB |
---|---|
Views Total: | 8368 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Slideup Menu is a simple jQuery plugin that slides out an animated menu panel when you hover over an Html element.
How to use it:
1. Load the jQuery library and the jQuery slideup menu in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.slideup.menu.1.0.js"></script>
2. Include the jQuery easing plugin for easing effects.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
3. Create a slide up menu as follows.
<div class="top-menu"> <div class="top-menu-main"> <ul class="demo-menu"> <li class="first">Item 1</li> <li class="">Item 2</li> <li class="">Item 3</li> <li class="">Item 4</li> <li class="last">Item 5</li> </ul> </div>
4. Active the slide up menu in the Javascript.
$(document).ready(function(){ $(".top-menu").slideupmenu({ slideUpSpeed: 150, slideDownSpeed: 200, ease: "easeOutQuad", stopQueue: true }); });
5. Style the menu via CSS.
.top-menu { margin: auto; width: 800px; text-transform: uppercase; font-weight: bold; background: #000; height: 38px; font-size: 10px; } .top-menu-main { position: relative; float: left; list-style: none; margin: 0; } .top-menu-main a { display: block; height: 38px; line-height: 3.8; padding: 0 15px; text-align: center; } ul.demo-menu { bottom: 38px; cursor: pointer; display: none; min-width: 100%; position: absolute; padding: 0px; margin: 0px; white-space: nowrap; -moz-box-shadow: 0 0 8px #333; -webkit-box-shadow: 0 0 8px #333; box-shadow: 0 0 8px #333; } ul.demo-menu > li { margin: 0px; padding: 10px 30px; background: #333; color: #fff; white-space: nowrap; list-style: none; } ul.demo-menu > li.hover { background: #cfcfcf; color: #333; }
This awesome jQuery plugin is developed by flamboyanz. For more Advanced Usages, please check the demo page or visit the official website.