jMenu: Horizontal navigations with unlimited dropdown sub-menus

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.

Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).

The markup of the menu is pretty clean as it makes use of nested lists.

The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible.

Download: https://github.com/jimmyfikes-dev/jMenu

Demonstration:

Plugin homepage:

Implementation:

1. First, include the css & jQuery files

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jmenu.css" media="screen" />
 
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jMenu.jquery.min.js"></script>

2. Now, add your HTML list

<!-- First, write your HTML -->
<ul id="jMenu">
  <li><a>Category 1</a>
    <ul>
      <li><a>Category 1.2</a>
        <ul>
          <li><a>Category 1.3</a></li>
          <li><a>Category 1.3</a></li>
          <li><a>Category 1.3</a></li>
        </ul>
      </li>
      <li><a>Category 1.2</a></li>
      <li><a>Category 1.2</a>
        <ul>
          <li><a>Category 1.3</a></li>
          <li><a>Category 1.3</a>
            <ul>
              <li><a>Category 1.4</a></li>
              <li><a>Category 1.4</a></li>
              <li><a>Category 1.4</a></li>
              <li><a>Category 1.4</a></li>
              <li><a>Category 1.4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a>Category 1.2</a></li>
    </ul>
  </li>
</ul>

3. Finally, make a simple jMenu plugin call

<script type="text/javascript">
  $(document).ready(function(){
    // simple jMenu plugin called
    $("#jMenu").jMenu();
 
    // more complex jMenu plugin called
    $("#jMenu").jMenu({
      ulWidth : 'auto',
      effects : {
        effectSpeedOpen : 300,
        effectTypeClose : 'slide'
      },
      animatedText : false
    });
  });
</script>

Options:

openClickBooleanDefault : false – Choose if jMenu opens by clicking or hovering.
ulWidthIntegerDefault : auto – fix the the sub-menus widths.
absoluteTopIntegerDefault : 30 – The top pos (absolute) in pixel of the sub-menu compared to the parent.
absoluteLeftIntegerDefault : 0 – The left pos (absolute) in pixel of the sub-menu compared to the parent.
effectSpeedOpenIntegerDefault : 150 – In ms, slideDown/fadeIn speed of the sub-menus.
effectSpeedCloseIntegerDefault : 150 – In ms, slideUp/fadeOut speed of the sub-menus.
effectTypeOpenStringDefault : slide – Can be set to ‘slide’, ‘fade’ or ” (empty)
effectTypeCloseStringDefault : hide – Can be set to ‘slide’, ‘fade’ or ‘hide’ (empty)
effectOpenStringDefault : linear – All jQuery UI effects allowed
effectCloseStringDefault : linear – All jQuery UI effects allowed
TimeBeforeOpeningIntegerDefault : 100 – In ms, waiting time before sub-menus slideDown/fadeIn effects.
TimeBeforeClosingIntegerDefault : 100 – In ms, waiting time before sub-menus slideUp/fadeOut effects.
animatedTextBooleanDefault : false – If true, animations on the hover (see the next option paddingLeft).
paddingLeftIntegerDefault : 7 – In pixel, the padding-left animation on the hover.

Screenshots:

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…

jQuery slideViewerPro: A “pro” jQuery image slider

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstandin…

jQuery Optimization: Avoid Unnecessary Styling

This is another common mistake that many jQuery developer made. jQuery provides us with the ability …