0

私はたくさんのオプションを備えたメニューを持っています。アイデアは、JQueryによって制御される左または右にナビゲートするためにスクロールボタンを使用することです（YouTubeでプレイリストを表示するのと同じように）。機能を失うことなく新しいエントリをサポートする機能的なものを作成する方法についてのアイデアや提案が必要です。これまでに試したものはすべて機能しますが、新しいオプションや新しく追加されたリンクには対応していません。ここにコードと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;
}
4

2 に答える 2

0

既存のソリューションを使用できます。

ŽivbioBranko！

于 2012-09-09T01:04:04.407 に答える
0

コメントで述べたように。誰も応答しなかったとしても、私がそう言うかもしれないのであれば、私はそれをかなり良い方法で自分で行う方法を見つけました。他の誰かが同じ問題にぶつかったら、ここに投稿します。答えを探していくつかのFAQを熟考したとき、私は愚かな考えを思いつきました。アンカーシステムを使用してメニューにカーソルを合わせてスクロールすることです。それを処理するための方程式は、から取られて修正されました...まあ、私はそれのクレジットを誰に与えるべきかわからないことを本当に恥ずかしく思います、私はそれの名前またはサイトを忘れました（しかしそれにもかかわらずそれはかなり単純です）。

そして今、

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（with 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-11T19:53:07.853 に答える