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:

Screenshots: