0

次の HTML に基づいて、非常に単純な水平ナビゲーション バーを作成したいと思います。

<div id="nav">
    <ol class="clear">
        <li><a href="#">Parent 1</a></li>
        <li><a href="#">Parent 2</a>
            <ul class="clear">
                <li><a href="#">Child 1</a></li>
                <li><a href="#">Child 2</a></li>
                <li><a href="#">Child 3</a></li>
            </ul>   
        </li>
        <li><a href="#">Parent 3</a></li>
     </ol>
</div>

..マウスオーバーでサブナビ（存在する場合）を表示します。

私は素晴らしい SuperFish プラグインについて知っていますが、ここでは非常にシンプルに保ち、可能であればプラグインを使用したくありません。

どうもありがとう！

4

2 に答える 2

1

これにより、正しい方向に進むはずです

$(document).ready(function() {
    $("div#nav > ol.clear > li > ul").hide();
    $("div#nav > ol.clear > li:has(> ul)").hover(function() {
        var x = $(this);
        x.children("ul").eq(0).css({'top':x.position().top + x.height()+5, 'left':x.position().left-37}).show();
    }, function () {
        $(this).children("ul").eq(0).hide();
    });
});

<style type="text/css" media="screen">
ol > li { display:inline; margin: 2px}
ul { position:absolute }
ul > li { display:inline }
ul > li > a { yellow; display:block }
</style>

このサイトでデモを確認してくださいhttp://jsbin.com/ejuxa

于 2009-12-10T14:42:46.170 に答える
0

プラグインを使いたくないのなら、CSS だけでやってみませんか? 「Ultimate」CSS ドロップダウン メニューへのリンクは次のとおりです。単純な CSS で簡単に実行できるのに、なぜ JavaScript を使用するのでしょうか。

編集

申し訳ありませんが、ここにリンクがあります: http://www.cssplay.co.uk/menus/final_drop.html

これを Firefox 3.5、Safari 4、IE8、および Chrome 3 でテストしたところ、すべて正常に動作しました。

于 2009-12-10T14:31:17.360 に答える