Collapse Overflowing Menu Dropdown With jQuery Plugin – More-Menu

Menu & Nav
File Size: 7.72 KB
Views Total: 1587 views
Last Update:January 28, 2022
Publish Date: November 26, 2015
Official Website: Go to website
License: MIT
Plugin Author:
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

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
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.

Related jQuery Plugins

You Might Also Like