Overflow horizontal navigation to drop down list

by oktaviardi pratama

HTML

<nav>
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Lorem 1</a></li>
    <li><a href="#d">Lorem ipsum 2</a></li>
    <li><a href="#">Lorem ipsum dolor 3</a></li>
    <li><a href="#">Lorem 4</a></li>
    <li><a href="#">Lorem ipsum 5</a></li>
    <li><a href="#">Lorem ipsum dolor 6</a></li>
    <li><a href="#">Lorem 7</a></li>
    <li><a href="#">Lorem ipsum 8</a></li>
    <li><a href="#">Lorem ipsum dolor 9</a></li>
    <li><a href="#">Lorem 10</a></li>
    <li><a href="#">Lorem ipsum 11</a></li>
    <li><a href="#">Lorem ipsum dolor 12</a></li>
    <li><a href="#">Lorem 13</a></li>
    <li><a href="#">Lorem ipsum 14</a></li>
    <li><a href="#">Lorem ipsum dolor 15</a></li>
    <li class="more">
      <span>...</span>
      <ul id="overflow"></ul>
    </li>
  </ul>
</nav>

CSS

body {
 padding:0;
 margin:0;
}
nav {
  background: #c00;
  overflow: hidden;
}
nav > ul {
  padding-right:50px;
  padding-left:0;
}
nav ul {
  list-style:none;
  margin: 0 0 2em;
}
nav ul li {
  float: left;
}
nav ul li.more {
  width: 3em;
  text-align: center;
  display: none;
      position: absolute;
    right: 0;
    top: 0;
    padding: 0;
}
nav ul li.more.open ul#overflow {
  opacity: 1;
  visibility: visible;
}
nav ul li a,
nav ul li span {
  display: block;
  background: #c00;
  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: #e00;
}
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: #00c;
  white-space: nowrap;
}
nav #overflow li a:hover {
  background: #00e;
}

JavaScript

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({
    'right': '0px'
  });
  $('.more').click(function(){
    if(!$('.more').hasClass('open')){
          $(this).addClass('open');
      }else{
      	 $(this).removeClass('open');
      }
  });
}