JSFiddle - React, Tailwind, and code Playground

by csornmo

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>

SCSS

body {
  font-family: lato,arial;
  overflow-y: scroll;
}
nav {
  background: #c00;
  overflow: hidden;
  ul {
    margin: 0 0 2em;
    padding:0;
    li {
      float: left;
      &.more {
        width: 3em;
        text-align: center;
        display: none;
        &:hover ul#overflow {
          opacity: 1;
          visibility: visible;
        }
      }
      a,span {
        display: block;
        background: #c00;
        color: #fff;
        text-decoration: none;
        padding: 1em;
        cursor: pointer;
        transition-duration: .3s;
        &:hover {
          background: #e00;
        }
      }
    }
  }
  #overflow {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    text-align: left;
    transition-duration: .3s;
    li {
      float: none;
      a {
        background: #00c;
        white-space: nowrap;
        &:hover {
          background: #00e;
        }
      }
    }
  }
}



html,body,ul {
    margin:0;
    padding:0;
}

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