» Mega Menu Vertical

It's finally here! You can now add a beautiful Mega Menu Vertical to your website in just a few clicks. It overcomes the difficulty of multi-level drop-down menus by combining multiple submenus into a single drop-down. This is the ideal way of displaying the navigation menu on larger websites. Usability expert, Jakob Nielsen, recommends the use of Mega Menus Vertical:

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

- Jakob Nielsen (March 2009)

This Mega Menu Vertical is based on the core Concrete5 "Autonav" block so it uses your existing website structure, but with a number of additional features.

The Mega Menu Vertical is perfect for everyone: website managers, web designers and web developers. You can choose from 8 colourful skins, or advanced users can create their own skin. The number of submenu row items is customisable along with the animation effect and animation speed.

It's easy to use, but powerful & flexible. The best of both worlds!

Download from the Concrete5 Marketplace ($15)

Are you looking for a horizontal Mega Menu?

Features:

  • Cross-browser support
  • Uses your existing C5 site structure to automatically update the menu as you add new pages
  • Control the ordering of menu items
  • Control the number of submenu levels to show
  • 8 beautiful skins to choose from (black, blue, green, grey, light blue, orange, red, white)
  • Designers can create their own custom skins with a bit of CSS knowledge
  • Choose from fade or sliding animated effect
  • Control the speed of the animation effect
  • Allow menu drop-down by either mouse hover or mouse click
  • Uses the "hover intent" jQuery library, so the drop-down menus have a short delay before hiding when the mouse rolls off
  • Configure the number of items per row to show
  • Position of drop-down menu is automatically adjusted if menu item is near left or right edge of page.
  • 1-click to add a drop-down site search tool (with a built-in custom block template)
  • 1-click to add user login form (requires free C5 login block)
  • Supports multiple menus on the same page
  • Adds 4 new page attributes:
    • Hide children from Mega Menu Vertical
    • Replace link with first child in Mega Menu Vertical
    • Don't link in navigation (ideal for creating text-only headings)
    • Mega Menu Vertical access key
  • Customisable keyboard shortcuts (uses browser "access keys" - usually ALT or ALT+CTRL and a single letter)
  • Developers can add their own advanced custom menu items (with some HTML/PHP knowledge)
  • Developers can create all sorts of custom formatting since each element in menu is given unique classes using the Collection (Page) ID. This could be used to apply a custom background image for a specific submenu or even an individual menu item.
  • New fade-in animation once page is fully loaded so IE users will not see partially loaded menu.
  • Uses jQuery, not Flash, for super-fast load time + iPhone/iPad support
  • VERTICAL ONLY: Set menu width
  • VERTICAL ONLY: Align menu to left (and automatically wrap content around right side of menu)
  • NEW: now control the placement of the submenu, either LEFT or RIGHT plus align the menu to the left or right of the page easily.

Advanced Tips:

To create your own custom skin, locate the css/skins/custom.css file. Copy the file contents and paste it in your site theme CSS file. It is recommended that you delete the contents of that custom.css file so it doesn't interfere with your custom theme. This also means if you update the add-on in the future, it won't overwrite your customisations.

The built-in search tool will send the user to the following page: /search/search-results
If you have modified (or deleted) the default search results page that ships with Concrete5, you can easily add it back in. Then you just need to add the "Search" block to that page. 

If you would like to format the current page (or current page path), there are 2 built-in CSS classes you can use in your site's CSS file: "nav-selected" and "nav-path-selected". The "nav-selected" class is added to the current page you're viewing on the website. The "nav-path-selected" is added to each parent page above the current page you're viewing. These classes are added to BOTH the "li" and "a" elements so you can style them independantly. Here's an example of what to add to your site's CSS file:

.mega-menu a.nav-selected{
color:red;
font-weight:bold; 
}

NEW IN v1.0.4:

DEVELOPERS: You can now pull in almost any content from your Scrabook and place it BEFORE or AFTER any menu element. Just edit the view.php file (or create your own custom block template). Commented code found in view.php. But here's an example:

$outputjs .= $controller->getBlockFromScrapbookAfter('.pid-5','myscrapbookitem');

"pid-5" is the class for a specific UL tag in the Mega Menu.
"myscrapbookitem" is the name of an example item in the global scrapbook.

Examples:

See the different skin colours as well as a number of key features: text only labels, replace link with 1st child's, external links and more.

This example shows how the "align menu to left" option works. The menu simply moves to the left and any other text or photos below it wraps around the right side. This eliminates the need to use complicated themes or layouts to acheive a nicely integrated vertical menu. This makes Mega Menu Vertical perfect for both large and small websites, both beginners and experienced Concrete5 users.

In addition, you can also choose the width of the menu to acheive a pixel-perfect layout. This example is 250px.

Like the regular Mega Menu add-on, developers can extend this by adding Concrete5 scrapbook items to the beginning or end of the menu using just 1 line of code. Designers can also modify every element on the menu for a uniquely styled solution. Almost anything can be tweaked using this method - link colours, fonts, background images, borders and more (basic CSS knowledge required).

Demonstration Video

Screenshots

Extra Videos:

For website managers: how to use the Mega Menu across your entire website (7:26)

For designers: unlimited customisation with Mega Menu (9:22)

For developers: add your own custom menu items such as images & video (7:25)