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:

openClick	Boolean	Default : false – Choose if jMenu opens by clicking or hovering.
ulWidth	Integer	Default : auto – fix the the sub-menus widths.
absoluteTop	Integer	Default : 30 – The top pos (absolute) in pixel of the sub-menu compared to the parent.
absoluteLeft	Integer	Default : 0 – The left pos (absolute) in pixel of the sub-menu compared to the parent.
effectSpeedOpen	Integer	Default : 150 – In ms, slideDown/fadeIn speed of the sub-menus.
effectSpeedClose	Integer	Default : 150 – In ms, slideUp/fadeOut speed of the sub-menus.
effectTypeOpen	String	Default : slide – Can be set to ‘slide’, ‘fade’ or ” (empty)
effectTypeClose	String	Default : hide – Can be set to ‘slide’, ‘fade’ or ‘hide’ (empty)
effectOpen	String	Default : linear – All jQuery UI effects allowed
effectClose	String	Default : linear – All jQuery UI effects allowed
TimeBeforeOpening	Integer	Default : 100 – In ms, waiting time before sub-menus slideDown/fadeIn effects.
TimeBeforeClosing	Integer	Default : 100 – In ms, waiting time before sub-menus slideUp/fadeOut effects.
animatedText	Boolean	Default : false – If true, animations on the hover (see the next option paddingLeft).
paddingLeft	Integer	Default : 7 – In pixel, the padding-left animation on the hover.

Screenshots: