jquery - 为菜单/导航栏制作滚动按钮

Question

我有一个包含很多选项的菜单，想法是使用滚动按钮向左或向右导航（就像在 youtube 上查看播放列表一样），由 JQuery 控制。我需要关于如何制作一个支持任何新条目而不会失去其功能的功能的想法或建议。到目前为止，我尝试的一切都有效，但无法处理新选项或新添加的链接。这是代码和CSS，任何建议都非常受欢迎。

HTML：

 <body>
        <div id="menu-new">
            <ul class="menu">
                <li class="sep">
                    <a href="/askthewizard/">Ask The Wizard</a>
                </li>
                <li>
                    <a href="/newreleases/">New Releases</a>
                </li>
                <li>
                    <a href="/casestudies/">Case Studies</a>
                </li>
                <li class="sep">
                    <a href="/maintenance/">Maintenance</a>
                </li>
                <li>
                    <a href="/schedule/">Schedule</a>
                </li>
                <li>
                    <a href="/timeclock/">Time Clock</a>
                </li>
                <li>
                    <a href="/payroll/">Payroll</a>
                </li>
                <li class="sep">
                    <a href="/humanresources/">Human Resources</a>
                </li>
                <li>
                    <a href="/application/">Application</a>
                </li>
                <li>
                    <a href="/other/">Other</a>
                </li>
            </ul>
        </div>

    </body>

CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
#menu-new {
    overflow: hidden;
    padding: 5px;
    background-color: #9A1C1C;
    border: 1px solid #000000;
    text-align: center;
}
#menu-new ul.menu {
    list-style: none outside none;
    width: 960px;
    display: block;
    margin: 0 auto;
}
#menu-new ul.menu li:first-child {
    margin: 0;
}
#menu-new ul.menu li.sep {
    border-right: 1px solid #000000;
    padding: 0 12px 0 0;
}
#menu-new ul.menu li {
    float: left;
    margin: 0 0 0 12px;
}
#menu-new ul.menu li a {
    color: #D9D8B5;
    display: block;
    font: bold 11px/30px 'Arial',sans-serif;
    padding: 0 8px;
    text-decoration: none;
    text-shadow: 0 1px 0 #460100;
    text-transform: uppercase;
}
a:link, a:visited {
    color: #9A1C1C;
    text-decoration: none;
}
a {
    outline: 0 none;
}
#menu-new ul.menu li a:hover, #menu-new ul.menu li a.active {
    background-color: #DDDCBE;
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 0 2px #222222;
    color: #742C2B;
    text-shadow: 0 1px 0 #FFFFFF;
}

score 0 · Accepted Answer

正如我在评论中提到的。即使没有人回应，如果我可以这么说的话，我还是找到了一种以一种非常好的方式自己做的方法。如果其他人遇到同样的问题，我会在这里发布。当我思考一些常见问题以寻找答案时，我有一个愚蠢的想法，使用锚系统悬停并滚动菜单。处理它的等式是从...中提取和修改的。好吧，我真的很惭愧，我不知道该归功于谁，我忘记了它的名称或站点（但它很简单）。

现在，

的HTML：

<div id="menu-new">
        <div class="contSize">           
            <ul class="menu">
                <li class="sep"><a href="#">
                    <a href="/askthewizard/">Ask The Wizard</a>
                </li>
                <li><a href="#">
                    <a href="/newreleases/">New Releases</a>
                </li>
                <li><a href="#">
                    <a href="/casestudies/">Case Studies</a>
                </li><a href="#">
                <li class="sep">
                    <a href="/maintenance/">Maintenance</a>
                </li>
                <li><a href="#">
                    <a href="/schedule/">Schedule</a>
                </li>
                <li><a href="#">
                    <a href="/timeclock/">Time Clock</a>
                </li>
                <li><a href="#">
                    <a href="/payroll/">Payroll</a>
                </li><a href="#">
                <li class="sep">
                    <a href="/humanresources/">Human Resources</a>
                </li>
                <li><a href="#">
                    <a href="/application/">Application</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
                <li><a href="#">
                    <a href="/other/">Other</a>
                </li>
            </ul>
            </div>
        </div>

CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
#menu-new  {
    overflow: hidden;
    padding: 5px;
    background-color: #9A1C1C;
    border: 1px solid #000000;
    text-align: center;
}

#menu-new div.contSize{
    width: 960px;
    overflow: hidden;
    margin: 0 auto;
}
#menu-new div.contSize ul.menu {
    list-style: none outside none;
    width: 9000px;
    display: block;
    padding-left: 10px;
}
#menu-new div.contSize ul.menu li:first-child {
    margin: 0;
}
#menu-new div.contSize ul.menu li.sep {
    border-right: 1px solid #000000;
    padding: 0 12px 0 0;
}
#menu-new div.contSize ul.menu li {
    float: left;
    margin: 0 0 0 12px;
}
#menu-new div.contSize ul.menu li a {
    color: #D9D8B5;
    display: block;
    font: bold 11px/30px 'Arial',sans-serif;
    padding: 0 8px;
    text-decoration: none;
    text-shadow: 0 1px 0 #460100;
    text-transform: uppercase;
}
a:link, a:visited {
    color: #9A1C1C;
    text-decoration: none;
}
a {
    outline: 0 none;
}
#menu-new div.contSize ul.menu li a:hover, #menu-new div.contSize ul.menu li a.active {
    background-color: #DDDCBE;
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 0 2px #222222;
    color: #742C2B;
    text-shadow: 0 1px 0 #FFFFFF;
}

JS（带 JQ）：

$(document).ready(function(){    
    var div = $('#menu-new div.contSize'),
                 ul = $('ul.menu'),
                 ulPadding = 15;

    var divWidth = div.width();
    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);
    });
});

score 0 · Accepted Answer

0

您可以使用现有的解决方案。

Živ 生物布兰科！

于 2012-09-09T01:04:04.407 回答

jquery - 为菜单/导航栏制作滚动按钮

2 回答 2

Related

Reference