2

ホバーすると左に「スライド」または「フライ」する単純なネストされたナビゲーションメニューを作成しようとしています。これを達成する唯一の方法はjQueryを使用することだと思いますので、私はそれをいじっています。

初期状態

ここに画像の説明を入力

ホバー状態

編集:この写真は少し間違っているように見えます。ul.sub-menu 全体 (例: PEOPLE & APPROACH) を順番にではなく一緒にスライドさせたいです。

ここに画像の説明を入力

一般的な構造は次のとおりです。

<nav>
<ul>
    <li>ABOUT
        <ul class="sub-menu">
            <li>PEOPLE</li>
            <li>APPROACH</li>
        </ul>
    </li>
    <li>PROJECTS</li>
    <li>CONTACT</li>
</ul>
</nav>

私のjQueryは次のとおりです。

$("nav li").on('hover', function(){
    $(this).children(".sub-menu").animate({width: 'toggle'});
});

現在、私の李は浮かんでいます。

私の問題は、親の LI にカーソルを合わせると、.sub-menu がフェードインしますが、1 行下にあり、フロートのためにすべてが飛び回っています。

誰かが私を正しい方向に向けることができますか?

4

1 に答える 1

2

これはあなたが行っていたものですか？display:inline-blockCSSのプロパティが欠落していたと思います。インライン ブロックを使用すると、そのプロパティを持つ各要素はブロックの機能 (幅、高さなど) を保持しますが、インラインのままになります (前後に切れ目はありません)。ブロック パーツがなければ、幅の変更を適用しても意味がありません。

CSS:

<style type='text/css'>
    nav li {
        display: inline;
        list-style: none;
    }

    .sub-menu {
        display: inline-block;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }
</style>

Javascript:

<script>
    $(function() {
        $('.sub-menu').hide();

        $('.link').hover(
            function() {            
                $('.sub-menu', this).stop().animate({
                    width: 'toggle',
                    opacity: 'toggle'
                } /* [, duration in ms] */);
            }
        );
    });
</script>

HTML:

<nav>
    <ul>
        <li class="link">ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li class="link">PROJECTS
            <ul class="sub-menu">
                <li>ONE</li>
                <li>TWO</li>
            </ul>
        </li>
        <li>CONTACT</li>
    </ul>
</nav>
于 2012-12-06T03:33:12.773 に答える