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

Answer 1

您可以使用existing solution。

ŽivbioBranko！

Answer 2

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

现在，

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

制作菜单/导航栏的滚动按钮

2 个答案: