Question

在这里，我想使用javascript创建一个水平滚动菜单，但我无法实现这一点可以帮助吗？

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>

如果您想了解更多详情，请查看此网站http://jsfiddle.net/QdJvb/

Answer 2

您可以像这样定义一个CSS类：

.scrollable {
    overflow-y: scroll;
}

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用动态内容创建水平滚动菜单

3 个答案: