jMenu, horizontal navigations with unlimited sub-menus in jQuery - jQuery plugin
jMenu description
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.
jMenu download package
- jMenu v1.8
- jquery
- jMenu.jquery.css
- jquery.js
- jquery-ui.js
- jMenu.jquery.js
- jMenu.jquery.min.js
- index.php
- arrow_down.png
- arrow_right.png
- jquery
jmenu implementation
1. First, include the CSS & jQuery files
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jMenu.jquery.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.js"></script>
2. Now, add your HTML lists
<!-- First, write your HTML -->
<ul id="jMenu">
<li><a class="fNiv">Category 1</a><!-- Do not forget the "fNiv" class for the first level links !! -->
<ul>
<li class="arrow"></li>
<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>
Who use jmenu on the web ?
If you use jMenu Plugin into your website and you want to be added here, please contact us !
We will add you with pleasure :)
How can you help us ?
If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !