Question

我找到了一个很好的Mega菜单，需要进行一些修改才能与ASP.Net webform应用程序一起使用。

此外，这个大型菜单适用于Click事件，这可能会使用户感到困惑，因为通常大部分用户都会将鼠标悬停在菜单上。

如何更改点击甚至悬停，以便当用户将鼠标悬停在菜单上时，用户将鼠标移出菜单即可显示下拉菜单。这是一个响应式菜单设计＆amp;可能是故意为点击事件而设计的。

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

实际示例：http://tympanus.net/Blueprints/HorizontalDropDownMenu/

注意：请将jsFiddle的`Result1区域的宽度增加到更大屏幕的视图，否则它将调整为小屏幕视图

Answer 1

嗯，要求您修改javascript source of the menu。

所以看起来应该是这样的。

<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();
});

on jsfiddle

Answer 2

此脚本完全有效：）

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 };

})();

Answer 3

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

function f() {
 g.on("mouseenter", a);

 b.on("mouseenter", function (h) { h.stopPropagation(); });
}

function a(j) {
    if (d !== -1) {
      b.eq(d).removeClass("cbp-hropen");
    }
    var i = jQuery(j.currentTarget).parent("li"),
        h = i.index();

    if (d == h)  {           
        i.addClass("cbp-hropen");
        d = h;
        //alert(h);
    }
    else if (d === h) {
        i.removeClass("cbp-hropen");
        d = -1 
    } else {

        i.addClass("cbp-hropen");
        d = h;
        c.off("mouseenter").on("mouseenter", e)
    }
    return false
}

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

}）（）;

Answer 4

只需要修改一个功能

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

将“click”替换为“mouseover”

如何将巨型菜单的Click事件转换为悬停

4 个答案: