JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="nav-wrap ovh">
  <ul class="nav">
    <li class="item">
       <a href="#!">Главная</a> 
    </li>
    <li class="item">
       <a href="#!">Новости</a> 
    </li>
    <li class="item">
       <a href="#!">Документация</a> 
    </li>
    <li class="item">
       <a href="#!">Дополнения</a> 
    </li>
    <li class="item">
       <a href="#!">Блоги</a> 
    </li>
    <li class="item">
       <a href="#!">Форумы</a> 
    </li>
    <li class="item">
       <a href="#!">Люди</a> 
    </li>    <li class="item">
       <a href="#!">Главная</a> 
    </li>
    <li class="item">
       <a href="#!">Новости</a> 
       <ul>
    <li class="item">
       <a href="#!">Документация</a> 
       <ul>
    <li class="item">
       <a href="#!">Документация</a> 
    </li>
    <li class="item">
       <a href="#!">Дополнения</a> 
    </li>
    <li class="item">
       <a href="#!">Блоги</a> 
    </li>
    <li class="item">
       <a href="#!">Форумы</a> 
    </li>  
       </ul>       
    </li>
    <li class="item">
       <a href="#!">Дополнения</a> 
    </li>
    <li class="item">
       <a href="#!">Блоги</a> 
    </li>
    <li class="item">
       <a href="#!">Форумы</a> 
    </li>  
       </ul>
    </li>
    <li class="item">
       <a href="#!">Документация</a> 
    </li>
    <li class="item">
       <a href="#!">Дополнения</a> 
    </li>
    <li class="item">
       <a href="#!">Блоги</a> 
    </li>
    <li class="item">
       <a href="#!">Форумы</a> 
    </li>
    <li class="item">
       <a href="#!">Люди</a> 
    </li>
    <li class="item more">
        <a href="#!">Больше</a>
        <ul class="reserve"></ul>
    </li>
  </ul>
</div>
<script>

CSS

.nav-wrap {
  height: 26px;
}
.nav-wrap.overflowhidden {
  overflow: hidden;
}
.nav-wrap .nav {
  padding: 0;
  margin: 0;
  letter-spacing: normal;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-wrap .nav .item {
  display: inline-block;
  float: left;
  position: relative;
}
.nav-wrap .nav ul {
  position: absolute;
  padding: 0;
  margin: 0;
  left: 0;
  letter-spacing: normal;
  min-width: 140px;
  display: none;
}
.nav-wrap .nav .more ul {
  right: 0;
  left: inherit;
}
.nav-wrap .nav :hover ul ul {
    position: absolute;
    right: 100%;
    left: inherit;
    top: 0;
}
.nav-wrap .nav :hover > ul {
  display: block;
}
.nav-wrap .nav .item ul li {
  display: block;
  float: none;
}
.nav-wrap .nav .item a {
  display: block;
  padding: 4px 6px;
  background: #444;
  color: #fff;
  text-decoration: none;
}
.nav-wrap .nav li:hover > a {
  opacity: 0.9;
}

JavaScript

var 
    navWrap = $('.nav-wrap'),
    navWrapHeight = navWrap.height(),
    nav = $('.nav'),
    navHeight = nav.height(),
    moreLi = nav.children('li.more');
    $(window).on('load resize', function() {
      navHeight = nav.height(),
      navLi = nav.children('li.item').not('.more');
      if (navHeight > navWrapHeight) {
        moreLi.css('visibility', 'visible');
        navLi.last().appendTo(moreLi.children('ul'));
        $(window).trigger('resize');
      } else {
      	if (nav.width() + navLi.last().width() + moreLi.width() < navWrap.width()) {
        	moreLi.children('ul').children('li').last().insertBefore(moreLi);
        };
      };
      if (!moreLi.find('li').length) {
        moreLi.css('visibility', 'hidden');
      };      
    });
    navWrap.removeClass('overflowhidden');
});