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

jQuery is a JavaScript library used by a very large percentage of the web development community, SEO Positive base most, if not, all of the JavaScript work we produce on jQuery because in the words of SEO Positive’s head of web development “It makes him weep with happiness”, we prefere to say it speeds up our development 10 fold.

Today we’re going to learn how to make our very first jQuery click event, a simple fading out action.

Firstly we need to create a div element with a contrasting background colour.

<div style="background: green;">Hello world</div>

Now we have an element we can call from jQuery, head over to www.jquery.com and download the production release and include it into our page using the example below.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

Once you have this in your page, you should be able to set up the click and fade event using the example below.

<script type="text/javascript">
$(document).ready(function(){
    $('div').click(function(){
          $(this).fadeOut();
    });
});
</script>

The above code will trigger a fading event on the all the divs on the page.

The code explained:

$(document).ready(function(){ should come before any jQuery you wish to use as this initiates and prepares jQuery for use once the document has finished loading and after you have finished writing your jQuery functions this should follow });

The next line $(‘div’) selects all the divs on the page and $(‘div’).click(function(){ means bind all click events on a div to the function .fadeOut

Much like the $(document).ready(function(){ closing line you must close any functions with });

Once you have these elements on your page, the click on any div should cause it to fade out at default speed.

For more details see www.jQuery.com