ダイナミックコンテンツで水平スクロール可能なメニューを作成する方法

Question

ここでは、javascriptを使用して水平スクロール可能なメニューを作成したいと思いますが、これを達成できません。

.scrollable { 
    overflow-y: scroll; 
} 

し、メニューに使用し、あなたのタグにこのクラスを追加します。

Answer 1

<script type="text/javascript"> 
    $(function() { 
     var div = $('div.sc_menu'), 
      ul = $('ul.sc_menu'), 
      ulPadding = 15; 
     var divWidth = div.width(); 
     div.css({ overflow: 'hidden' }); 
     var lastLi = ul.find('li:last-child'); 
     div.mousemove(function (e) { 
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 

      var left = (e.pageX - div.offset().left) * (ulWidth - divWidth)/divWidth; 
      div.scrollLeft(left); 
     }); 
    }); 
</script> 

あなたはより多くの細部はあなたがこのようにCSSクラスを定義することができhttp://jsfiddle.net/QdJvb/

Answer 2

このサイトをチェックしたい場合。

Answer 3

$("#add").click(function(){ 
 
    var x = Math.floor((Math.random() * 10000) + 1); 
 
$("ul").append(' <li runat="server" id="etype"><a href="EmployeeType.aspx">' + x + '</a></li>') 
 
})

div.sc_menu { 
 
    position: relative; 
 
    max-width: 500px; 
 
    min-width: 400px; 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sc_menu" style="vertical-align: middle;"> 
 
    <ul> 
 
    <li runat="server" id="branch"><a href="frmBranch.aspx">Branch</a></li> 
 
    <li runat="server" id="etype"><a href="EmployeeType.aspx">Employee Type</a></li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<button id="add">Add</button>