menu with overflow

by jpeter06

HTML

<br><br>
<div  id="menu">
    <div id="hiddenSubM_R" class="unselectable hiddenSubM" onclick="moveLeft('menu')">&gt;</div>
    <div id="hiddenSubM_L" class="unselectable hiddenSubM" onclick="moveRight('menu')">&lt;</div>
    <ul class="unselectable">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
        <li>menu6</li>
        <li>menu7</li>
        <li>menu8</li>
    </ul>
</div>

CSS

body, html {
        height: 90%;
    }

.hiddenSubM{
    display:block;
    background:#999;
    color:#ddd;
    position:absolute;
    height:38px;
    line-height: 38px;
    width:20px;
    cursor:pointer;
    font-size:20px;
    font-weight: bold;
    font-family:arial;
    text-align:center;
}

#hiddenSubM_R{
    right:2px;
}

#hiddenSubM_L{
    left:2px;
}

#menu{
    display:block;
    white-space:nowrap;
    width:100%;
    overflow:hidden;
    background:#999;
    height:auto;
}

#menu ul{
    list-style:none;
    display: inline-block;
    float:left;
    padding-left: 6px;
    margin: 0px;
}

#menu ul li{
    display: inline-block;
    padding: 10px 20px;

    cursor:pointer;
    background-color:#eee;
    color:#7B8585;
    
    transition:0.3s;
}

#menu ul li:hover{
    background-color:#beecea;
}

#menu ul li.focused{
    color:#fff;
    background-color:#41c7c2;
}

.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

JavaScript

function moveLeft(id){
    var element=document.getElementById(id);
    element.scrollLeft=element.scrollLeft+8;
}
function moveRight(id){
    var element=document.getElementById(id);
    element.scrollLeft=element.scrollLeft-8;
}


function isOverFlowed(id){
    var element=document.getElementById(id);
    console.log("scrollLeft:"+element.scrollLeft+
                " width:"+element.clientWidth+
                " scrollWidth:"+ element.scrollWidth);
    return  element.scrollWidth > element.clientWidth;
}

function mostrarSubMenu(){
    var overflow=isOverFlowed("menu");
    if(overflow){
        $('.hiddenSubM').each(function( index ) {
          this.style.display = 'block';
        });
    }else{
         $('.hiddenSubM').each(function( index ) {
          this.style.display = 'none';
        });
    }
}

var timeOut = null;

window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(mostrarSubMenu, 100);
}

 $(function(){
     
     $('#hiddenSubM_R').mousedown(function(){
        int00 = setInterval(function() { moveLeft('menu');  }, 20);
    }).mouseup(function() {
    clearInterval(int00);
    });
          $('#hiddenSubM_L').mousedown(function(){
        int00 = setInterval(function() { moveRight('menu');  }, 20);
    }).mouseup(function() {
    clearInterval(int00);
    });
     mostrarSubMenu();
 });