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: