Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A simple jquery menu helper
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
images
js
.gitignore
README.rdoc
test.html

README.rdoc

JQUERY SLIDING MENUS

When you have a side bar on any website, it will usually get really big. So, sliding menus appear. I just got tired of coding the same thing over and over again and so, I just made that a plugin.

How to use it

The easiest way to use this plugin is to just run this function:

$(".menu-holder").slidingMenu();

You can configure some options. Here I'll show the default ones:

animationSpeed : "fast"
slideUpInner   : true             // if false, the sub-menus will stay visible even if it's parent is hidden
slideDownInner : false            // if true, all the navigation levels will be visible when a top level is clicked
triggerElement : ".menu-title"    // The element you want to trigger the event
holderElement  : ".menu-items"    // The element that holds the actual items
activeClass    : "active"         // The class element that will be added to the opened menus
closedClass    : "closed"         // The class element that will be added to the hidden menus

The basic HTML structure is quite simple.

<div class="menu-holder">
  <h1 class="menu-title">Level 1 menu</h1>
  <ul class="menu-items">
    <li>Chunky Bacon!</li>
    <li>Foo</li>
    <li>Another menu item</li>
  </ul>
</div>

You can check out the test page for another HTML structure. Notice that the menu items can be any html tag and not only list items.

TODO

  • Add styling to the test page

CONTRIBUTORS

Nicolás Hock Isaza (nhocki)

Something went wrong with that request. Please try again.