CSS3 Mega Drop Down Menu

This Mega Drop Down Menu is a flexible and easy to integrate solution to build your custom menus. The drop down relies only on CSS /XHTML and comes with a fully working contact form.

3 main variants are included : horizontal, vertical aligned on the left and vertical aligned on the right.

The content can be organized into 6 columns based on the 960 grid system. This item comes with 9 color variants (and 2 color schemes for the drop downs – dark and light) and a detailed documentation to help you to customize it.

Features

• NEW : Improved compatibility with touchscreen devices (requires javascript files)
• Working Contact Form (requires javascript files)
• 9 color schemes
• Horizontal and Vertical Layouts
• Full Width variant
• Easy to customize
• Valid XHTML / CSS 3 markup
• Cross Browser Support
• Up to 6 columns
• Typography examples
• Form stylings
• Left or right alignment
• Help documentation

Compatible Browsers

This menu has been tested (and works !) with all the following browsers :

• Internet Explorer 6+
• Firefox 2+
• Safari 4+
• Opera 10+
• Chrome 4+

Changelog

03/15/2012 – Version 5.0

• Rewrote entirely the mobile script for touchscreen devices (mobile.js)
• Added CSS media queries making the mega menus responsive
• Updated jQuery

10/26/2012 – Version 4.2

• Added the ability to align the drop downs vertically (vertical versions only)

10/19/2011 – Version 4.1

• Grouped the light and dark variants into the CSS (now you can switch between them just by changing a class)
• Reorganized all the HTML files in each folder
• Improved compatibility with touchscreen devices
• Fixed some minor IE-specific issues
• Improved the CSS3 browser-specific markup

IMPORTANT NOTICE

Due to the diversity of mobile / touchscreen devices available, I can’t guarantee compatibility with all of them, this update is an improvement and lets the users open and close the drop downs on click (or “tap / touch”).

08/06/2011 – Version 4.0

• Added a simple working contact form
• Added a full browser width variant (the menu remains centered)

05/05/2011 – Version 3.0

• Recoded large parts of the main CSS
• Changed the organization of the files
• Made a few minor adjustments in the HTML
• Grouped all color variants in the CSS
• Removed the reset which used to lead to confusion
• Added a IE-specific CSS stylesheet (for gradients and minor fixes)
• Added navigation bar gradients for IE 6 -8
• Completely changed the way to handle the full width drop down variant (no more negative margins)
• Added a “right aligned” vertical variant
• Made a few design improvements, especially with the dark theme
• Combining the “columns” or the “full width” variants is much more easier

03/15/2011 – Version 2.2

• Added a dark variant of the drop down
• Small improvements for IE6 (graphics)

11/30/2010 – Version 2.1

• Fixed a small bug in IE8
• Added a 2-Levels Drop Down
• Added a bonus Vertical Mega Menu

10/20/2010 – Version 2.0

• Added a Full Width drop down variant
• Separated the previous version (1.2) and the new one

10/14/2010 – Version 1.2

• More specific CSS classes, so they don’t overwrite your existing stylings
• Moved the reset in a separate CSS file

You can now use safely this Mega Menu along with my CSS Sticky Footer

09/29/2010 – Version 1.1

• Removed some unnecessary CSS code
• Improved the right alignment code

09/22/2010 – Version 1.0

• Initial release