Overflow horizontal navigation to drop down list2

by oktaviardi pratama

HTML

<div class="nav-container sticky">
  <div id="main-nav-set" class="container-bx">
    <ul id="main-nav">
      
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/horoscope/">
          <span>
            ดูดวง
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/review/">
          <span>
            รีวิว
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/beauty/">
          <span>
            ความงาม
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/fashion/">
          <span>
            แฟชั่น
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/home/">
          <span>
            บ้าน
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/lifestyle/">
          <span>
            ไลฟ์สไตล์
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/mom-baby/">
          <span>
            แม่และเด็ก
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/health/">
          <span>
            สุขภาพ
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/pet/">
          <span>
            สัตว์เลี้ยง
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab" href="/categories/love/">
          <span>
            ความรัก
          </span>
        </a>
      </li>
       
      <li class="main-nav-item">
        <a class="main-nav-tab"...

CSS

.nav-container {
    background: #fff;
    height: 40px;
    position: relative;
    z-index: 9;
    border-bottom: 2px solid #ededed;
}
.nav-container .container-bx {
    width: 990px;
}
.container-bx {
    width: 1024px;
    margin: 0 auto;
}
#main-nav {
    position: relative;
    z-index: 9;
    width: 600px;
    display: inline-block;
    padding: 0;
    margin-bottom: 0px;
    margin-top: 3px;
}
#main-nav .main-nav-item {
    position: relative;
    float: left;
}
#main-nav .main-nav-item {
    display: inline;
    font-family: inherit;
}
#main-nav .main-nav-tab {
    float: left;
    padding: 0 12px;
    text-align: center;
    color: #73767B;
    text-decoration: none;
    font-size: 14px;
    line-height: 33px;
    margin: 0 6px;
}
.nav-container {
    background: #fff;
    height: 40px;
    position: relative;
    z-index: 9;
    border-bottom: 2px solid #ededed;
}

JavaScript

$(document).ready(function(){
  window.onresize = navigationResize;
  window.onload = navigationResize;
  navigationResize();

  function navigationResize() {  
    $('li.more').before($('#overflow > li'));

    var $navItemMore = $('#main-nav > li.more'),
    $navItems = $('.nav-container #main-nav > li:not(.more)'),
    navItemMoreWidth = navItemWidth = $navItemMore.width(),
    windowWidth = $(window).width(),
    mainNavWidth = $('#main-nav-set').width(),
    overflowWidth = $('#overflow').width(),
    navItemMoreLeft, offset, navOverflowWidth;

    $navItems.each(function() {
      navItemWidth += $(this).width();
    });



//for show and hide more button
navItemWidth > mainNavWidth ? $navItemMore.show() : $navItemMore.hide();

while (navItemWidth > mainNavWidth) {
  navItemWidth -= $navItems.last().width();
  $navItems.last().prependTo('#overflow');
  $navItems.splice(-1,1);
}

//counting how much offset value
navItemMoreLeft = $('#main-nav .more').offset().left;
navOverflowWidth = $('#overflow').width();  
offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth; 
$('#overflow').css({
  'right': '-5px',
  'top': '35px',
});
}
$('.more.main-nav-item').mouseenter(function(){
  $(this).addClass('open');
});
$('.more.main-nav-item').mouseleave(function(){
  $(this).removeClass('open');
});