Posted by: SEO Positive

Posted on: November 8, 2010 8:37 am

-

A drop down menu always seems buggy, lets face it they’re a nightmare and we usually just leave it “For the easier alternative”

But they’re really not that difficult to achieve. See the code below for how to achieve this with some simple jQuery and your own CSS.

jQuery('#main_menu').mouseenter(function(){
        jQuery('#sub_menu').show();
})
.mouseleave(function(){
        jQuery('#sub_menu').hide();
}};

The above uses mouseenter() and mouseleave() rather than mouseon() and mouseout(). The difference between the 4 functions is mouseenter() will monitor the mouse over event and ignore mouseon() events on children and mouseleave() fires when you leave either the children of the element or the element itself.

Which makes it perfect for hover menus, hovering over expanding details and many other really cool things.

Enjoy making your jQuery hover menus without having to use hoverintent or any other complicated plugins or jQuery, it really is that simple

Authors
Categories
Archives
Blogroll