问题
I found a nice Mega menu which need some modification so that it can be used with ASP.Net webform application.
Besides that this mega menu works on the Click event which may confuse user at time as usually most of the user are used to hover effect over the menus.
How can i change click even to hover so that that when user hover over the menu it show up till user moves mouse out of the menu are of dropdown. This is a responsive menu design & may have been designed intentionally for click event.
http://jsfiddle.net/9fmfC/1/
$(function() {
cbpHorizontalMenu.init();
});
Actual Example: http://tympanus.net/Blueprints/HorizontalDropDownMenu/
Note: Please increase the width of the `Result1 area of jsFiddle to the view of larger screen otherwise it will adjust to small screen view
回答1:
This script works completely :)
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 };
})();
回答2:
Well it required that you modify the javascript source of the menu.
So it should look something like this.
<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>
and the code after beautifying and changes
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
回答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
}
})();
回答4:
Only one function needs to be modified
function f() {
g.on("mouseover", a); b.on("mouseover", function (h) { h.stopPropagation() });
}
Replace "click" with "mouseover"
来源：https://stackoverflow.com/questions/16146549/how-to-convert-click-event-of-mega-menu-to-hover