More Menu is jquery plugin can provides an elegant solution for making menus responsive that automatically collapses overflowing menu items into a ‘More Menu’ dropdown when the menu is too long to fit into a horizontal navbar. It check the out-side width of each menu item and their margins. Then jquery script calculates to adjust, how many will fit keeping in mind the size of the more link.
Table of Contents
How to use it:
Start by including the JS file on your page and the CSS file :
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="path/to/moreMenu.js"></script>
<link rel="stylesheet" href="path/to/moreMenu.css">
Your HTML structure will need to be :
<ul id="primary-nav">
<li><a href="/" title="Link">Link</a></li>
<li><a href="/" title="Another link">Another link</a></li>
....
</ul>
Initialize the more menu plugin with default options.
<script type="text/javascript">
$('ul#primary-nav').moreMenu();
</script>
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
