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
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="//"></script>
<script src=""></script>

2. Include the jQuery easing plugin for easing effects.

<script src=""></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>

4. Active the slide up menu in the Javascript.

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.