responsive menu

by oktaviardi pratama

HTML

<nav>
  <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><a href="#">Menu 11</a></li>
  <li><a href="#">Menu 12</a></li>
  <li><a href="#">Menu 13</a></li>
  <li><a href="#">Menu 14</a></li>
  <li><a href="#">Menu 15</a></li>
  <li><a href="#">Menu 16</a></li>
  <li><a href="#">Menu 17</a></li>
  <li><a href="#">Menu 18</a></li>
  <li><a href="#">Menu 19</a></li>
  <li><a href="#">Menu 20</a></li>
  <li><a href="#">Menu 21</a></li>
  <li><a href="#">Menu 22</a></li>
  <li class="more"> <span>...</span>
    <ul id="overflow">
    </ul>
  </li>
</ul>
</nav>

CSS

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

nav ul { margin: 0 0 2em; list-style:none;}

nav ul li { float: left; }

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

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

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; }

nav #overflow {
  list-style:none;
  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; }

JavaScript

$(document).ready(function(){
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
  });
}

});