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.

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

• In the head section add the following code:
  ^?View Code XML

  <link rel="stylesheet" href="stylesheets/jquery.sliding-menu.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- jQuery UI is Optional. Its only required if using easing functions. --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="javascripts/jquery.sliding-menu.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu(); jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 }); }); </script>

• Add the form in the body as shown below
  ^?View Code XML

  <div id="HorizontalSlidingMenu"> <ul class="SlidingMenu Horizontal"> <li><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> </ul> </div> <div id="VerticalSlidingMenu"> <ul class="SlidingMenu"> <li><a href="#">First Link</a></li> <li><a href="#">Second Link</a></li> <li><a href="#">Third Link</a></li> <li><a href="#">Fourth Link</a></li> <li><a href="#">Fifth Link</a></li> </ul> </div>

That’s it you are done!

For advanced users:

Hope you liked the plugin. Awaiting your comments

If you liked the plugin please spread it for your friends to use and please rate it at http://plugins.jquery.com/project/jquery-sliding-menu

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

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

• Supports custom validations
• Options to toggle between live and onsubmit validations
• Completely customizable CSS

• In the head section add the following code:
  ^?View Code XML

  <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(){ jQuery("#<id of field to be validated>").validate({ expression: "if (<expression for validation>) return true; else return false;", message: "<message on validation failure>" }); }); </script>

• Add the form in the body as shown below
  ^?View Code XML

  <form action="" method="post"> <input type="text" name="<name of field to be validated>" id="<id of field to be validated>" /> <input type="submit" value="Submit" /> </form>

That’s it you are done!

For advanced users:

• expression: The javascript code which should have two outputs
  or . The value of the field is given by . As this is a string escape characters for backslash and other non standard characters must be used. (Default: return true;)
• message: The validation message for the field. (Default: “”)
• error_class: The CSS class of the error message container. (Default: “ValidationErrors”)
• error_field_class: The CSS class added to the field when found invalid. (Default: “ErrorField”)
• live: Sets whether the validation of the field should be live or on form submit. (Default: true)

The other day I was searching for a jQuery based MegaMenu over google but couldn’t find any good plugin for the same so sat down and wrote one for myself. Here is a simple jQuery plugin to create an unbloated MegaMenu in seconds.

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

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

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="javascripts/jquery.megamenu.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".MegaMenuLink").megamenu(".MegaMenuContent", { width: "900px" }); }); </script>

  We can replace MegaMenuLink with the class of the menu links and MegaMenuContent with the class of the menu content. To have a flexible width of the megamenu just disable the width options or set width:”auto”.

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

  <a class="MegaMenuLink" href="javascript:void(0)">First Mega Menu</a> <div class="MegaMenuContent"> Menu Content goes here </div>

Enjoy the plugin and do not forget to comment about it here.