如何创建具有dyanamic内容的水平滚动菜单

How to create Horizontal Scroll-able menu with dyanamic content

本文关键字：水平 菜单 滚动 dyanamic 何创建 创建      更新时间：2023-09-26

这里我想使用javascript创建一个水平滚动菜单，但我无法实现这一点，有人能帮我吗？

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

如果您想要更多详细信息，请查看此网站http://jsfiddle.net/QdJvb/

您可以定义这样的CSS类：

.scrollable {
    overflow-y: scroll;
}

然后将此类添加到用于菜单的标记中。

$("#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>

相关文章：