Responsive Horizontal Nav Menu with jQuery and CSS

A mobile-friendly horizontal navigation menu that automatically clips overflowing menu items and adds them into a dropdown list when not enough space is available.

How to use it:

1. Create a normal horizontal navigation using Html unordered list.

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Menu 7</a></li>
  <li><a href="#">Menu 8</a></li>
  <li><a href="#">Menu 9</a></li>
  <li><a href="#">Menu 10</a></li>
  ...
  <li class="more"> <span>...</span>
    <ul id="overflow">
    </ul>
  </li>
</ul>

2. Style the navigation menu.

nav {
  background: #DA4453;
  overflow: hidden;
}

nav ul { margin: 0 0 2em; }

nav ul li { float: left; }

nav ul li a,
nav ul li span {
  display: block;
  background: #DA4453;
  color: #fff;
  text-decoration: none;
  padding: 1em;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

nav ul li a:hover,
nav ul li span:hover { background: #ED5565; }

3. Style the dropdown list.

nav ul li.more {
  width: 3em;
  text-align: center;
  display: none;
}

nav ul li.more:hover ul#overflow {
  opacity: 1;
  visibility: visible;
}

nav #overflow {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  text-align: left;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

nav #overflow li { float: none; }

nav #overflow li a {
  background: #34BC9D;
  white-space: nowrap;
}

nav #overflow li a:hover { background: #46CFB0; }

4. Include the jQuery JavaScript library at the end of the document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 

5. The jQuery script to detect the window resize event and put the overflowing menu items into the dropdown list.

window.onresize = navigationResize;
navigationResize();

function navigationResize() {  
  $('#nav li.more').before($('#overflow > li'));
  
  var $navItemMore = $('#nav > li.more'),
      $navItems = $('#nav > li:not(.more)'),
      navItemMoreWidth = navItemWidth = $navItemMore.width(),
      windowWidth = $(window).width(),
      navItemMoreLeft, offset, navOverflowWidth;
  
  $navItems.each(function() {
    navItemWidth += $(this).width();
  });
  
  navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
    
  while (navItemWidth > windowWidth) {
    navItemWidth -= $navItems.last().width();
    $navItems.last().prependTo('#overflow');
    $navItems.splice(-1,1);
  }
  
  navItemMoreLeft = $('#nav .more').offset().left;
  navOverflowWidth = $('#overflow').width();  
  offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
    
  $('#overflow').css({
    'left': offset
  });
}

---

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