Simple jQuery Slide Up Menu Plugin - Slideup Menu

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.