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.
/
$(function() {
cbpHorizontalMenu.init();
});
Actual Example: /
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
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/9fmfC/1/
$(function() {
cbpHorizontalMenu.init();
});
Actual Example: http://tympanus/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
Share asked Apr 22, 2013 at 11:56 LearningLearning 20.1k44 gold badges192 silver badges396 bronze badges4 Answers
Reset to default 3This script works pletely :)
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 };
})();
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
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
}
})();
Only one function needs to be modified
function f() {
g.on("mouseover", a); b.on("mouseover", function (h) { h.stopPropagation() });
}
Replace "click" with "mouseover"