What Are Mega Menus?

Mega menus are drop down menus used on websites. They can include images, icons, lists of links with section titles, text boxes with short articles or descriptions, and can even include videos, widgets and gadgets or product purchase buttons. They are designed to help enhance site navigation, menu scannability and categorization of the website contents. Sites link Amazon.com have been using this menu style for many years.

Generally used for larger, and shopping websites (see "when to use" below), mega menus are usually based on columns and can be configured with anywhere from 1 to 6 or more columns. Code used for mega menus will be HTML and CSS but can also include Javascript or jQuery to animate the opening effect when they open on hover or click. Mega menus can also refer to "deep footers" that include a large number of links in the footer area, even though these areas do not include a dropdown functionality.


Mega Menu Example


Mega menus can be used on any type of website, HTML 4.01 or HTML5, XHTML, PHP or ASP webpages. The styles, colors and fonts, as well as the pop open functionality is usually done with CSS code. To make the menu global for easy editing, the menu file may be a PHP, html or .js file. Allwebco mega menu templates use an HTML page for the editable plain text menu file, and jQuery is used to make the menu global by setting the HTML page as a jQuery "include". All code is W3C Standards compliant.


Available Template Styles:


Why Megas are a Good Idea

Traditional drop down menus work well on smaller to medium sized websites, allowing for users to view all the webpages a site contains quickly without scrolling. However, once a menu tab is displayed containing a large single column list of links, say 6 or more links, it can sometimes be less intuitive for the user to sort out the information offered. Enter mega menus. By adding visual aids (a picture can be worth a thousand words) and sorting links into columns, the menu area suddenly becomes more user friendly.


Benefits:

  • WEBSITE SIZE: Because of the columns, websites can contain a large number of pages.
  • DISPLAY: On mouseover, individual tabs each become a separate visual presentation.
  • ORGANIZATION: Visual aids, titles, pictures, icons and colored text boxes, display the information on the website more intuitively.
  • USER RESPONSE: Information is presented in a more organized manor through concept grouping, keeping visitors on a website longer.
  • INTERACTION: People like hovering and clicking on things and making other things happen. Megas can present a stunning mouseover display.
  • EASE OF USE: Less webpage scrolling.
  • INFORMATION SORTING: Related information can be better grouped.
  • GRAPHIC: Richer typography & visual aids.
  • THE HUMAN FACTOR: Visual aids work better with a person's short term memory.
  • HIGHLIGHTS: Menus can include key notes or icons to draw a user's attention to areas of your most important information.


Making Them Responsive

If the website is mobile responsive, then the mega menus also need to respond for desktop, laptop, tablet and smartphones. Because they are a more complex menu system, they are not usually coded as "fluid responsive", but rather use a type of adaptive or "step responsive". Wide menu buttons or columns are setup to be hidden on smaller screen resolutions and mobile devices will display only the more compact menus. As the browser window narrows, Media Queries "breakpoint" code is used to hide the wider top level buttons thus allowing for an optimal user experience no matter what size viewing screen the end user has. Allwebco mega menu web templates are setup as responsive in this way and have the highest rating available of 100/100 at Pagespeed Insights. All designs pass the Google Mobile Friendly Test.

Making mega menus responsive does limit how much content can be displayed on mobile devices and is an important consideration during web development. The website, including the menus, will need to be tested on multiple devices each time there are any layout or major menu changes.


Menu Columns

Mega menus are setup in columns. You can configure your menus to have any number of columns and the content can either be setup in separate columns or content can be setup to span any number of columns. They are designed as HTML global "include" files to allow for site wide updates in a single file. They can be edited using any plain text editor like Notepad on Windows or TextEdit on Mac computers.


Menu Columns Style 1
[ Used in Business and Shopping Carts style templates ]




Menu Columns Style 2 (CEO)
[ Used in CEO style templates ]





CSS Styling & Media Queries for Mobile

Mega menu web templates all include a global css (cascading style sheet) file. This is a plain text file that allows you to edit the menu font face and color, background and border colors and gradients, as well as set widths and margins for all menu elements. A Media Queries section at the bottom of this file allows for configuring for different viewing device screens and adds the responsiveness.


When to Use Mega Menus

Because there is a large amount of space to fill with content and links, this menu style is not for every website. Consider however, that mega drop menus can be configured for only a single top level button on small websites.


Mega menus are a good choice if:

  • You plan a large website, but will be starting small*
  • You plan a large eCommerce site with multiple product pages
  • Your website will contain lots of articles, news or publications
  • You have a business website with vast amounts of products, info and FAQs
  • Your website is just plain big

*Although recommended for larger websites, mega menus can be scaled down to include much less information, just images and text blurbs, have fewer top level buttons, and can even be configured to look like a traditional drop down menu. Save a copy of the original menu file included with the download, and at any future date you can re-add the image and text content back into the design.




Bookstore Menu SampleWhite Mega SampleDrop Down Mega Menu Bizzy-SEO Example
Mega Menu Website Examples




See also:


Resources:



Developer Grade Design

All Allwebco webpage layouts are stand alone zip file downloads built for novice users as well as professional web developers. Designs include pre-formatted html pages for all common website purposes. Built in features as well as integrated Javascripts and jQuery allow for dynamic slideshows and photo galleries, drop down menus, animated jQuery slideshows, PDF downloads, contact and quotes forms as well as Youtube video integration. Css style files, the header, footer, menu and sidebars are global files so a single edit will update the entire website.

Our designs are used for business, personal, stores, schools, organizations, local and national government agencies, non-profit organizations, and more worldwide. Search above on this webpage for any business, product or website application or feature to view some available designs.










Mega Drop Menus