Note - all previews below are full-scale images, the download includes the coded files.

CSS Mega Menu

This premium mega menu was developed by us from scratch for use on Zomex.com. Since our website re-design we've had many customers ask about our menu and its availability so one year later have decided to make this special menu available to anyone who wishes to enhance the navigation experience on their website. This menu really is one of a kind, it is one of the most light-weight menus of available for its level of functionality and easy of use. It is pure CSS unlike many Javascript heavy alternatives, which makes it extremely search engine optimisation friendly. On 30/07/13 we updated the menu to include a fully responsive version!

CSS Mega Menu screencasts

Responsive demo

Main features

Features

New update (30/07/13)

- Fully responsive! (non-responsive version also available) - we've included a fully responsive version of the menu so it works on and responds to all devices from your desktop to your iPhone.

- Feature images We've added a example of images used in the dropdown container. This allows you to promote the most important services/links in each tab.

- New icon implementation We've added a example of how you can add a small new icon to the top right of links. This allows you to show your visitors which links have recently been added to your menu.

- Light-weight - The menu is made up of only 4 small images (possible to use none at all), 173 lines of CSS (can be compressed to one line) & easy to read HTML.

- Easy to customize - This menu is extremely easy to customise, the text/dropdowns/amount of tabs can be changed easily in the HTML which is well noted and indented. The style is very easy to change by editing the CSS, from colors to spacing it's very easy to tweak

- No javascript used - Absolutely no Javascript is used in this menu. Javascript tends to be slow and bad for search engine optimisation (as search engine bots can't read Javascript some menu links will be un-reasonable and pages may not be indexed as a result) which is why we avoided using it.

- Browser support - We spent weeks testing this menu in all of the major browsers, it works perfectly in all modern browsers including FireFox, Safari, Opera, Internet Explorer 7+

- iPhone/iPad support - This menu even works flawlessly on the iPhone and iPad. The dropdowns will automatically be shown when the main tab is touched. e.g touching the structure tab will reveal the dropdown as in the screenshot.

- CSS3 enhancements with fall-back - By default some CSS3 is used to enhance the design including the rounded corners, text shadows & gradients. In browsers where CSS isn't supported such as Internet Explorer 7 it will degrade correctly. For example the rounded corners will show squared and the gradients will revert to solid colors.

- Sticky hovers - Unlike with many dropdown menus the tabs highlight will remain when the mouse is on the dropdown. This makes the menu a pleasure to use as it clearly shows by the hover gradient which dropdown you're viewing. This functionality also works on the iPhone & iPad.

- Extremely fast - This menu is extremely fast as it's made up of only 4 images and has been developed in a highly efficient way using the best CSS2 and CSS3 techniques along with clean HTML. The images that are used are compressed and could even be removed completely in favour of CSS.

- Home icon - The home icon is replacement of plain text not only saves space but is also a very popular web 2.0 style way to include a home link.

- Right call-to-action - Every website has a sole purpose, that may be to increase sales, increase newsletter subscribers, invite visitors to contact you etc That's why we've included a bold call-to-action on the right of the menu that can be used to help achieve the goal of your website. On Zomex.com we use this to direct visitors to the checkout in hopes of increasing sales.

- Submenu descriptions - The descriptions on the submenus is a intuitive way to describe the link.

- Left or right dropdowns - Each dropdown be set to align to the right or left by simply changing 1 word in the code. This allows you to build a menu that doesn't overlap meaning the dropdowns never go over the width of the menu (see Zomex.com for an example of how this looks).

- Reliable support - We provide full support with this menu including where/how to edit the colors, fonts etc. The only thing we can't provide support on is integration with your website. We recommend that you have good HTML/CSS experience before purchasing, however if you don't have this experience we will be happy to send you a quote for customisation and/or integration.



Further examples

See below for some further screenshots, all of these examples are included (fully coded) in the download

800px wide (small screen)

320px wide (iPhone)

Right aligned dropdown

Without images (design is all CSS based)

Without CSS3 (also demonstrates what it'll look like in browsers that don't support CSS3 such as Internet Explorer 7)

Blue color scheme (10 minutes customisation)