我找到了一个不错的 Mega 菜单，需要进行一些修改，以便它可以与 ASP.Net webform 应用程序一起使用。
除此之外，这个大型菜单适用于 Click 事件，这有时可能会使用户感到困惑，因为通常大多数用户都习惯于将鼠标悬停在菜单上。
我如何才能将点击更改为悬停，以便当用户将鼠标悬停在菜单上时它会显示出来，直到用户将鼠标移出菜单才是下拉菜单。这是一个响应式菜单设计，可能是为点击事件而设计的。
$(function() {
cbpHorizontalMenu.init();
});
实际示例：http ://tympanus.net/Blueprints/HorizontalDropDownMenu/
注意：请把jsFiddle的`Result1区域的宽度调大到大屏视图，否则会调整到小屏视图
那么它需要你修改菜单的 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 & 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 & 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 & 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 & 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 & 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();
});
该脚本完全有效:)
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 };
})();
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
}
})();
只需修改一项功能
function f() {
g.on("mouseover", a); b.on("mouseover", function (h) { h.stopPropagation() });
}
将“点击”替换为“鼠标悬停”