Collapse Overflowing Menu Items Into A Dropdown - jQuery MoreMenu

jQuery MoreMenu is a jQuery based responsive menu solution that automatically collapses overflowing menu items into a 'More Menu' dropdown when the menu is too long to fit into a horizontal navbar. Supports multi-level menus using nested HTML lists.

It checks the outer width of each menu item, and their margins. Then calculates how many will fit keeping in mind the size of the more link.

How to use it:

1. Create a regular multi-level nav bar from nested HTML lists as follows:

<div id="menu-container">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Featured</a></li>
    <li class="has-subs"> <a href="#">jQuery</a>
      <ul>
        <li><a href="#">jQuery Library</a></li>
        <li><a href="#">jQuery UI</a></li>
      </ul>
    </li>
    <li class="has-subs"> <a href="#">React</a>
      <ul>
        <li><a href="#">React.js</a></li>
        <li><a href="#">React Native</a></li>
      </ul>
    </li>
    <li class="has-subs"> <a href="#">HTML</a>
      <ul>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">XHTML</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

2. The example CSS styles for the nav bar.

#menu-container {
  max-width: 880px;
  margin: 0 auto 50px;
  border: 2px solid #555;
  border-radius: 3px;
  padding: 20px;
  position: relative;
  max-width: 100%;
  user-select: none;
  min-width: 416px;
  max-width: 95vw;
}

#menu-container ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#menu-container .menu {
  font-size: 0;
  border: 1px solid #888;
  border-radius: 3px;
}

#menu-container .menu > li {
  display: inline-block;
  font-size: 15px;
  line-height: 50px;
}

#menu-container .menu > li + li::before {
  content: " ";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 1px;
  left: -1;
  background: #ccc;
}

#menu-container .menu > li.has-subs > a:after {
  content: " ";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  display: inline-block;
  margin-left: 10px;
}

#menu-container .menu > li ul {
  position: absolute;
  white-space: nowrap;
  top: 100%;
  left: 0;
  background: #f2f2f2;
  border-radius: 4px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
  display: none;
  min-width: 100%;
}

#menu-container .menu > li ul li.has-subs > a {
  position: relative;
  padding-right: 30px;
}

#menu-container .menu > li ul li.has-subs > a:after {
  content: " ";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #333;
  display: inline-block;
  margin-left: 10px;
  position: absolute;
  top: 21px;
  right: 14px;
}

#menu-container .menu > li ul ul {
  top: 0;
  left: 100%;
}

#menu-container .menu li {
  position: relative;
  z-index: 10;
}

#menu-container .menu li:hover > ul { display: block; }

#menu-container a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
}

#menu-container a:after { display: none; }

3. Include jQuery library and the jQuery MoreMenu plugin at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.moremenu.js"></script> 

4. Initialize the more menu plugin with default options.

$('#menu-container .menu').moreMenu();

5. All possible plugin options.

$('#menu-container .menu').moreMenu({

  // Custom more link
  verb: {
    more_link: '<a href="#">More..</a>'
  },

  // Where should the more menu be placed?
  // Possible to pass a selector or element
  // or: inside_more_item(puts it inside the menu li), after_menu (more menu is inserted after the menu element)
  more_menu_location: 'inside_more_item',

  // on what element should the classes change when user toggles and moremenu is initialized?
  // Possible to pass a selector or element
  class_target: 'more_menu',

  // What type of menu items are we looking for?
  menu_item: '> li',

  // how much earlier should a menu item move into the more menu? how much space should there horizontaly be left?
  extra_offset: 0,

  // should we be checking for resizing of document?
  check_for_resize: false
  
});

---

This awesome jQuery plugin is developed by krinkled. For more Advanced Usages, please check the demo page or visit the official website.