0

シンプルで基本的な CSS ドロップダウン メニューがあり、選択した項目の下に矢印のグラフィックを中央に配置したいと考えています。理想的には、完全に CSS を使用します。私は:afterセレクターでこれを行うことを考えましたが、メニューオプション間の分割線を引くために既にそれを使用しています:

HTML:

<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='selected'>Option Two
        <ul class='sub-menu'>
            <li>Sub One</li>
        </ul>
    </li>
    <li>Option Three Is Not the Best</li>
</ul>
<div class='arrowholder'>
    <div class='arrow'></div>
</div>

CSS:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

ul {
    list - style: none;
    width: 100 % ;
    background: red;
    height: 50px;
    padding: 10px 10px 0 10px;
    margin: 0px;
}
li {
    float: left;
    margin - top: 10px;
}
li: after {
    content: "|";
    margin: 0 8px;
}.sub - menu {
    display: none;
}

.arrowholder {
    clear: both;
    width: 100 % ;
    background: green;
    height: 50px;
}
.arrow {
    width: 50px;
    height: 50px;
    background: url(http: //upload.wikimedia.org/wikipedia/en/1/1c/Up_Arrow_Icon.png) no-repeat;border:solid 1px white;
}

JSFiddle: http://jsfiddle.net/pnoeric/MrW58/2/

私はすでにjQueryベースのソリューションを整理しました（フィドルに表示されます）が、何らかの理由で、クロスブラウザーで機能していません... position() メソッドは、ChromeとFirefoxで異なる値を返していますだから信頼できない。

更新:うーん、私の jQuery ベースのソリューションは、Chrome JavaScript コンソールが開いていないときに完全に機能します。それが開いていると、jQuery position() メソッドが混乱し、奇妙な値を返します。すっごく...解決策があります。jQueryベースのソリューションがそれを行います。開発者コンソールを閉じるだけです。

理想的には、100% CSS であるソリューションを探しています。それを除けば、jQuery を少しサポートしています。どうすればこれを達成できますか?

4

3 に答える 3

0

Chrome の JavaScript コンソール パネルが開いていない限り、私の jQuery ベースのソリューションは完全に機能することがわかりました。それが開いていると、position() メソッドが混乱し、機能しなくなります。それを発見するのは非常にイライラしますが（非常に多くの時間を無駄にしました）、見つけてよかったです。

これが解決策です...矢印のグラフィックを手動で中央に配置する必要がある場所に移動するだけです。

$(function() {
    p = $('.current').position();
    w = $('.current').width();
    naw = $('.arrow').width();
    f = Math.floor(p.left + (w/2) - (naw/2))-20;
    $('.arrow').css('margin-left', f+'px');
});
于 2013-08-28T03:52:12.067 に答える
0

単純に背景画像を各 li に適用しない理由は、background-position:bottom center; を使用することです。矢印を配置するには、background-repeat:no-repeat; 次に padding-bottom を使用して、コンテンツが矢印と重ならないようにします。

于 2013-08-28T02:14:14.537 に答える