0

ASP.Net Web フォーム アプリケーションで使用できるように、いくつかの変更が必要な素敵な Mega メニューを見つけました。

それに加えて、このメガ メニューは Click イベントで機能します。これは、通常ほとんどのユーザーがメニュー上で効果をホバーするのに慣れているため、ユーザーを混乱させる可能性があります。

クリックをホバーに変更して、ユーザーがメニューにカーソルを合わせると、ユーザーがマウスをメニューの外に移動するまで表示されるようにするにはどうすればよいですか? これはレスポンシブ メニュー デザインであり、クリック イベント用に意図的に設計されている可能性があります。

http://jsfiddle.net/9fmfC/1/

    $(function() {
        cbpHorizontalMenu.init();
    });

実際の例: http://tympanus.net/Blueprints/Horizo​​ntalDropDownMenu /

注: jsFiddle の `Result1 領域の幅を大きな画面のビューに合わせて広げてください。そうしないと、小さな画面のビューに調整されます。

4

4 に答える 4

3

このスクリプトは完全に機能します:)

var cbpHorizontalMenu = (function() {

var $listItems = $( '#cbp-hrmenu > ul > li' ),
    $menuItems = $listItems.children( 'a' ),
    $body = $( 'body' ),
    current = -1;

function init() {
    $menuItems.on( 'mouseover', open );
    $listItems.on( 'mouseover', function( event ) { event.stopPropagation();} );
            $listItems.on( 'mouseleave', close );
}

function open( event ) {

    if( current !== -1 ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' );
    }

    var $item = $( event.currentTarget ).parent( 'li' ),
        idx = $item.index();

    if( current === idx ) {
        $item.removeClass( 'cbp-hropen' );
        current = -1;
    }
    else {
        $item.addClass( 'cbp-hropen' );
        current = idx;
    }

    return false;

}

function close( event ) {
    $listItems.eq( current ).removeClass( 'cbp-hropen' );
    current = -1;
}

return { init : init };

})();
于 2013-04-22T12:17:27.443 に答える
3

メニューの JavaScript ソースを変更する必要がありました。

したがって、次のようになります。

<div class="container">
    <div class="main">
        <nav id="cbp-hrmenu" class="cbp-hrmenu">
            <ul>
                <li>    <a href="#">Products</a>

                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                            <div>
                                    <h4>Learning &amp; Games</h4>

                                <ul>
                                    <li><a href="#">Catch the Bullet</a>
                                    </li>
                                    <li><a href="#">Snoopydoo</a>
                                    </li>
                                    <li><a href="#">Fallen Angel</a>
                                    </li>
                                    <li><a href="#">Sui Maker</a>
                                    </li>
                                    <li><a href="#">Wave Master</a>
                                    </li>
                                    <li><a href="#">Golf Pro</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Utilities</h4>

                                <ul>
                                    <li><a href="#">Gadget Finder</a>
                                    </li>
                                    <li><a href="#">Green Tree Express</a>
                                    </li>
                                    <li><a href="#">Green Tree Pro</a>
                                    </li>
                                    <li><a href="#">Wobbler 3.0</a>
                                    </li>
                                    <li><a href="#">Coolkid</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Education</h4>

                                <ul>
                                    <li><a href="#">Learn Thai</a>
                                    </li>
                                    <li><a href="#">Math Genius</a>
                                    </li>
                                    <li><a href="#">Chemokid</a>
                                    </li>
                                </ul>
                                    <h4>Professionals</h4>

                                <ul>
                                    <li><a href="#">Success 1.0</a>
                                    </li>
                                    <li><a href="#">Moneymaker</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /cbp-hrsub-inner -->
                    </div>
                    <!-- /cbp-hrsub -->
                </li>
                <li>    <a href="#">Downloads</a>

                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                            <div>
                                    <h4>Education &amp; Learning</h4>

                                <ul>
                                    <li><a href="#">Learn Thai</a>
                                    </li>
                                    <li><a href="#">Math Genius</a>
                                    </li>
                                    <li><a href="#">Chemokid</a>
                                    </li>
                                </ul>
                                    <h4>Professionals</h4>

                                <ul>
                                    <li><a href="#">Success 1.0</a>
                                    </li>
                                    <li><a href="#">Moneymaker</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Entertainment</h4>

                                <ul>
                                    <li><a href="#">Gadget Finder</a>
                                    </li>
                                    <li><a href="#">Green Tree Express</a>
                                    </li>
                                    <li><a href="#">Green Tree Pro</a>
                                    </li>
                                    <li><a href="#">Holy Cannoli</a>
                                    </li>
                                    <li><a href="#">Wobbler 3.0</a>
                                    </li>
                                    <li><a href="#">Coolkid</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Games</h4>

                                <ul>
                                    <li><a href="#">Catch the Bullet</a>
                                    </li>
                                    <li><a href="#">Snoopydoo</a>
                                    </li>
                                    <li><a href="#">Fallen Angel</a>
                                    </li>
                                    <li><a href="#">Sui Maker</a>
                                    </li>
                                    <li><a href="#">Wave Master</a>
                                    </li>
                                    <li><a href="#">Golf Pro</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /cbp-hrsub-inner -->
                    </div>
                    <!-- /cbp-hrsub -->
                </li>
                <li>    <a href="#">Applications</a>

                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                            <div>
                                    <h4>Learning &amp; Games</h4>

                                <ul>
                                    <li><a href="#">Catch the Bullet</a>
                                    </li>
                                    <li><a href="#">Snoopydoo</a>
                                    </li>
                                </ul>
                                    <h4>Utilities</h4>

                                <ul>
                                    <li><a href="#">Gadget Finder</a>
                                    </li>
                                    <li><a href="#">Green Tree Express</a>
                                    </li>
                                    <li><a href="#">Green Tree Pro</a>
                                    </li>
                                    <li><a href="#">Wobbler 3.0</a>
                                    </li>
                                    <li><a href="#">Coolkid</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Education</h4>

                                <ul>
                                    <li><a href="#">Learn Thai</a>
                                    </li>
                                    <li><a href="#">Math Genius</a>
                                    </li>
                                    <li><a href="#">Chemokid</a>
                                    </li>
                                </ul>
                                    <h4>Professionals</h4>

                                <ul>
                                    <li><a href="#">Success 1.0</a>
                                    </li>
                                    <li><a href="#">Moneymaker</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /cbp-hrsub-inner -->
                    </div>
                    <!-- /cbp-hrsub -->
                </li>
                <li>    <a href="#">Projects</a>

                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                            <div>
                                    <h4>Learning &amp; Games</h4>

                                <ul>
                                    <li><a href="#">Catch the Bullet</a>
                                    </li>
                                    <li><a href="#">Snoopydoo</a>
                                    </li>
                                    <li><a href="#">Fallen Angel</a>
                                    </li>
                                    <li><a href="#">Sui Maker</a>
                                    </li>
                                    <li><a href="#">Wave Master</a>
                                    </li>
                                    <li><a href="#">Golf Pro</a>
                                    </li>
                                </ul>
                                    <h4>Utilities</h4>

                                <ul>
                                    <li><a href="#">Gadget Finder</a>
                                    </li>
                                    <li><a href="#">Green Tree Express</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Entertainment</h4>

                                <ul>
                                    <li><a href="#">Gadget Finder</a>
                                    </li>
                                    <li><a href="#">Green Tree Express</a>
                                    </li>
                                    <li><a href="#">Green Tree Pro</a>
                                    </li>
                                    <li><a href="#">Holy Cannoli</a>
                                    </li>
                                    <li><a href="#">Wobbler 3.0</a>
                                    </li>
                                    <li><a href="#">Coolkid</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /cbp-hrsub-inner -->
                    </div>
                    <!-- /cbp-hrsub -->
                </li>
                <li>    <a href="#">Freeware</a>

                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                            <div>
                                    <h4>Utilities</h4>

                                <ul>
                                    <li><a href="#">Green Tree Pro</a>
                                    </li>
                                    <li><a href="#">Wobbler 3.0</a>
                                    </li>
                                    <li><a href="#">Coolkid</a>
                                    </li>
                                </ul>
                                    <h4>Education</h4>

                                <ul>
                                    <li><a href="#">Learn Thai</a>
                                    </li>
                                    <li><a href="#">Math Genius</a>
                                    </li>
                                    <li><a href="#">Chemokid</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Professionals</h4>

                                <ul>
                                    <li><a href="#">Success 1.0</a>
                                    </li>
                                    <li><a href="#">Moneymaker</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                    <h4>Learning &amp; Games</h4>

                                <ul>
                                    <li><a href="#">Catch the Bullet</a>
                                    </li>
                                    <li><a href="#">Snoopydoo</a>
                                    </li>
                                    <li><a href="#">Fallen Angel</a>
                                    </li>
                                    <li><a href="#">Sui Maker</a>
                                    </li>
                                    <li><a href="#">Wave Master</a>
                                    </li>
                                    <li><a href="#">Golf Pro</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /cbp-hrsub-inner -->
                    </div>
                    <!-- /cbp-hrsub -->
                </li>
            </ul>
        </nav>
    </div>
</div>

と美化後のコードと変更

var cbpHorizontalMenu = (function () {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on("mouseover", a);
        b.on("mouseover", function (h) {
            h.stopPropagation()
        })
    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("click", e)
        }
        return false
    }

    function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    }
})();

$(function () {
    cbpHorizontalMenu.init();
});

jsfiddleで

于 2013-04-22T12:02:57.100 に答える
0

変更が必要な関数は 1 つだけです

function f() {
    g.on("mouseover", a); b.on("mouseover", function (h) { h.stopPropagation() });
}

「クリック」を「マウスオーバー」に置き換えます

于 2013-04-22T12:23:17.980 に答える