Collapse Overflowing Menu Dropdown With jQuery Plugin – More-Menu

Menu & Nav
File Size: 7.72 KB
Views Total: 1356 views
Last Update:January 28, 2022
Publish Date: November 26, 2015
Official Website: Go to website
License: MIT
Plugin Author: pattle
Demo    Download

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.

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

List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.