Demo: Click Here
Download: Click Here
Project Repository: Click Here

So whats new in jQuery MegaMenu 2

1. A completely revamped JS and CSS code-base.
2. Easier to use. (A lot simpler HTML and JS needs to be used to initiate the menu)
3. Customizable menu show and hide effects, with three available options of slideDown/slideUp, fadeIn/fadeOut and simple
4. Customizable menu activation and deactivation actions. Now you can choose to activate the menu by click or by mouseover
5. HoverIntent like feature embedded into the code-base so that we have smooth navigation by default without any external libraries.
6. Automatic alignment of the menu content according to the width of the parent menu container.
7. Variable width of the menu contents.
8. Non obtrusive and easier to understand CSS.

Usage:

• In the header section of the HTML add the following:
  ^?View Code XML

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="javascripts/jquery.megamenu.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".megamenu").megamenu(); }); </script>

  We can replace megamenu with the class of the megamenu unordered list. To have the megamenu aligned to right just use the option ‘justify’:'right’

• Next in your body add the following code:
  ^?View Code XML

  <ul class="megamenu"> <li> <a href="javascript: void(0)">First Menu</a> <div style="width: 350px;">Contents of the first mega menu</div> </li> <li> <a href="javascript: void(0)">Second Menu</a> <div style="width: 350px;">Contents of the second mega menu</div> </li> </ul>

Advanced Options and Usage

• To have the megamenu activated on click use the ‘activate_action’ option as follows:
  ^?View Code JAVASCRIPT

  jQuery(document).ready(function(){ jQuery(".megamenu").megamenu({ 'activate_action':'click' }); // Can take 'click', 'mouseover' and 'mouseenter' as values only. Default: 'mouseover' });

• MegaMenu Show/Hide Options:
  ^?View Code JAVASCRIPT

  jQuery(document).ready(function(){ jQuery(".megamenu").megamenu({ 'show_method':'fadeIn', 'hide_method': 'fadeOut' }); // 'show_method' can take 'fadeIn', 'slideDown' and 'simple' as values only. Default: 'slideDown' // 'hide_method' can take 'fadeOut', 'slideUp' and 'simple' as values only. Default: 'slideUp' });

• MegaMenu JS Shadow Options:
  ^?View Code JAVASCRIPT

  jQuery(document).ready(function(){ jQuery(".megamenu").megamenu({ 'enable_js_shadow':true, 'shadow_size':5 }); // 'enable_js_shadow' can take true/false. Default: true // 'shadow_size' can take any whole number greater than 0. Default: 3 });

• MegaMenu Align Options:
  ^?View Code JAVASCRIPT

  jQuery(document).ready(function(){ jQuery(".megamenu").megamenu({ 'justify':'right' }); // Can take left/right. Default: left });

Enjoy the MegaMenu Plugin and do not forget to comment about it here.
If you like the plugin do share it.

An important feature which I missed out in versions 1.0 and 1.1 has been added in this version. It is a callback option which can help make AJAX callbacks or any other callbacks when the form is successfully validated.

Now we can make callbacks on successful validation.
In this example I am making an AJAX post to post.php when the form is successfully validated. For this we just need to add the following to the head section of our HTML file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
            jQuery(function(){
                //The Validation as earlier
                jQuery("#<id of field to be validated>").validate({
                    expression: "if (<expression for validation>) return true; else return false;",
                    message: "<message on validation failure>"
                });
                //The callback for the form with ID FormID
                jQuery("#FormID").validated(function(){
                   jQuery.post("post.php", jQuery("#FormID").serialize(), function(data){ jQuery("#FormID").html(data); });
                });
            });
</script>

I have updated the advanced demo with an alert callback.

Advanced Demo: Click Here
Download: Click Here
Project Repository: Click Here

Hope this feature helps. And many thanks to Vayu for pointing out this important feature.

1. Validations of radio-buttons and check-boxes now possible
2. Added jquery.validation.functions.js to modularize addition of new validation functions.
3. New validation functions added
   1. isValidDate(year, month, day): It takes in three parameters the year(i.e. full year) of the date, the month of the date and the day part of the date and returns false if its not a valid date and true if valid. It includes checking of leap years. For example: 02-29-2008 will show as valid but 02-29-2009 as invalid.
   2. isChecked(id): It takes the id of the container containing the group of check-boxes or radio-buttons and returns false if none of the children were checked and true if at-least one was checked.

Advanced Demo: Click Here
Download: Click Here
Project Repository: Click Here