1

まず第一に、私が説明しようとしていることはすべて、このフィドルで示されています。

http://jsfiddle.net/rxaBH/3/

3レベル深くなるナビゲーションタブについて考えてみます。第1レベルのタブ、第2レベル：ドロップダウンリスト。第3レベル横に開く2番目のドロップダウンリスト。ビジュアルは次のとおりです。

ここに画像の説明を入力してください

。そのための簡略化されたHTMLは、次のようになります。

<ul id = "maintabs">
    <li>child 1</li>
    <li>child 2
        <ul>
            <li>grand child 1</li>
            <li>grand child 2
                <ul>
                    <li>great grand child 1</li>
                    <li>great grand child 2</li>
                    <li>great grand child 3</li>
                </ul>                
            </li>
        </ul>    
    </li>
</ul>

CSSコードは長すぎるため、ここに配置する必要はありませんが、フィドルリンクにあります。

マウスオーバーに基づいてメニューを表示/非表示にするjQueryコードは次のとおりです。

$("ul#maintabs li").hover(function () {
    $('ul:eq(0)', this).stop(true, true).animate({
        height: 'show',
        opacity: 'show'
    }, 150);
}, function () {
    $('ul:eq(0)', this).animate({
        height: 'hide',
        opacity: 'hide'
    }, 150);
})

これはすべてうまく機能しますが、ユーザーの操作は第3レベルのアイテムに移動するために改善される可能性があります。スイカ>緑>本当に濃い緑に移動したいとします。したがって、「スイカ」にカーソルを合わせると、ドロップダウンが表示され、「緑」にカーソルを合わせると、サイドドロップダウンが表示されます。次に、水平方向に「緑」から「暗い」にカーソルを合わせ、次に垂直方向に下に移動して「本当に濃い緑色」にします。これがvisulです。マウスの動きは赤い矢印で視覚化されています。

ここに画像の説明を入力してください

しかし、ユーザーが最初に水平方向にスクロールせずに、「緑」から「本当に濃い緑」に斜めに移動したい場合はどうでしょうか。これが望ましい振る舞いのビジュアルです：

ここに画像の説明を入力してください

これにより、マウスは「緑色」のままになり、その結果、メニューが折りたたまれて完全に消えます。では、これをどのように修正できますか？

マウスリーブのタイムアウトを増やしてみましたが、別の問題が発生します。途中で緑から「本当に濃い緑」に移動したい場合は、「赤」、場合によっては「紫」にもカーソルを合わせます。「赤」にも子供がいたらどうなるでしょうか。次に、「緑」から「赤」にマウスを合わせると、「赤」のサブメニューも表示され、同時に1つ以上の第3レベルのメニューが開きます。これはひどいように見えます。

それがすべて理にかなっていることを願っています！

ありがとうございました。

4

2 に答える 2

-1

代わりにドアマットの使用を検討しましたか? マルチレイヤー ナビゲーションを使用することは賢明ではなく、多くのユーザビリティの問題があります。

それがあなたが望む理想的な行動です。マウスアウト時に、要素を非表示にする必要があります。それ以外の場合は、そこに保持されます。

IBM Web サイトのドアマット メニューを確認してください。きっと気に入っていただけると思います。

http://www.ibm.com/us/en/

于 2012-08-03T18:10:02.013 に答える