JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<nav> 
  
    <h1>This menu turns into a &lt;select> when window is less than 960px to conserve space.</h1>
  	
  	<ul> 
  		<li><a href="#" class="active">Home</a></li> 
  		<li><a href="#books">Books</a></li> 
  		<li><a href="#blog">Blog</a></li> 
  		<li><a href="#about">About Us</a></li> 
  		<li><a href="#support">Support1</a></li> 
  		<li><a href="#support">Support2</a></li> 
  		<li><a href="#support">Support3</a></li> 
  		<li><a href="#support">Support4</a></li> 
  		<li><a href="#support">Support5</a></li> 
  		<li><a href="#support">Support6</a></li> 
  		<li><a href="#support">Support7</a></li> 
  		<li><a href="#support">Support8</a></li> 
  		<li><a href="#support">Support9</a></li> 
  		<li><a href="#support">Support10</a></li> 
  		<li><a href="#support">Support11</a></li> 
    </ul>
  	
  </nav>

CSS

* {
      margin: 0;
      padding: 0;
    }
    h1 {
      font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      width: 500px;
      margin: 0 auto 15px;
    }
    nav {
      display: block;
      margin: 100px auto;
      text-align: center;
    }
    nav ul {
      list-style: none;
    overflow:hidden;
    height:30px;
    background:red;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: inline-block;
      background: #333;
      color: white;
      padding: 5px 15px;
      text-decoration: none;
    }
    nav a:hover {
      background: red;
    }
    nav a:active {
      background: blue;
    }
#moreLI { position:relative; }
#moreLI ul { position:absolute; top:30px; right:0; display:none; height:auto; }

JavaScript

var run = 0;
$(function () {
        console.log("init");
        var navUL = $("nav ul"),
            firstLI = navUL.find("li:first-child"),
            lastLI = navUL.find("li:last-child"),
            moreLI = $('<li id="moreLI"><a href="#">More ▼</a><ul></ul></li> ').hide().appendTo(navUL),
            moreLIUL = moreLI.find("ul"),
            isFullyVisible = false;
    moreLI.click(function(e) { e.preventDefault(); moreLIUL.toggle(); navUL.css("overflow", (moreLIUL.is(":visible") ? "visible" : "hidden")); });
        //$(window).click(function () {
        $("h1").click(function () {
                console.log("click");
                var firstLITop = firstLI.offset().top,
                    lastLITop = lastLI.offset().top,
                    _this = this;
                _this.moveLeft = function () {
                    moreLI.show();
                    console.log("moveleft", moreLI.offset().top, firstLITop);
                    if (moreLI.offset().top > firstLITop) {
                        moreLIUL.append(navUL.find(navUL.find(navUL.find("li:nth-last-child(2)"))));
                        isFullyVisible = false
                        console.log("moveleft", navUL.find(navUL.find("li:nth-last-child(2)")));
                        if (++run < 13) setTimeout(_this.moveLeft, 25);
                    }
                }
                _this.moveLeft();
                _this.moveRight = function () {
                    if (!isFullyVisible && moreLI.offset().top == firstLITop && !moreLI.is(navUL.find("li:last-child"))) {
                        navUL.append(moreLIUL.find("li:firstChild"));
                        console.log("moveright", navUL);
                        setTimeout(_this.moveRight, 4);
                    } else {
                        isFullyVisible = true;
                        moreLI.hide();
                    }
                }
                _this.moveRight();
            });
    });