爲菜單/導航欄製作滾動按鈕

我有一個菜單，其中有很多選項，其想法是使用滾動按鈕來導航左側或右側（就像在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; 
}

來源

2012-09-08 Inexorable

正如我在評論中提到的。即使沒有人迴應，如果我可以這樣說，我自己也找到了一種很好的方式來做到這一點。如果有人遇到同樣的問題，我會在這裏發佈。正如我思考一些常見問題尋找答案我有一個愚蠢的想法，使用錨系統懸停和滾動菜單。處理這個問題的等式被採用並修改了......好吧，我真的很慚愧，我不知道是誰給它的功勞，我忘了名字或它的網站（但它很簡單）。

而現在，

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

來源

2012-09-11 19:53:07 Inexorable

你可以使用existing solution。

Živbio Branko！

來源

2012-09-09 01:04:04

其實多虧了事實沒有人迴應，我發現了一個很好的方法來自己做。無論如何，謝謝你的努力。 Hvala :) – Inexorable

爲菜單/導航欄製作滾動按鈕

回答

相關問題