Creating A Mega DropDown

mega-front

First introduced in Une Boutique 2.0 Mega DropDowns are finally available for you to use on your own site with ease. Here is how to, it is very simple.

Go to Appearance -> Menus  and since this feature only works on the main navigation menu position select your main nav from the Select a menu to edit: drop down list, Click on select button to go to that menu and start turning you regular menu into a mega one.

First of all on the screen option (top right corner of the page) make sure the description is check marked. This is the field we use to put our html codes or shortcodes to be used in the mega dropdown.

mega-desc

Now, the best part. Choose the patent of your mega menu, choose which ever one that you want it’s children to appear as mega drop down. (For example on the theme demo, the shortcodes parent menu item is a mega parent.)

No on your wordpress admin -> appearance -> menus click on the mega parent to expand it’s options, and check mark Make this a mega menu?  choose an optional icon if you want.

mega-options

Now lets go to the drop down it self. We are going to need three levels of menu items here, the level one which was the parent, we just set by check marking the option mentioned above.

The Second level would the parent (title) for menu columns we have in our dropdown. These titles could have links, or could be # for empty links which would make them appear as titles only. They could also take icon.

The third level would become the columns menu items, which are what matters the most. (There could also be a forth level which would appear as children of the third level items a little bit indented.)

mega-structure

After structuring your menu like the image above, you can save your changes and Voila! you have created your first mega drop down.

The column numbers are calculated automatically by the number of level two parents they have. But don’t make too many of them.

Assigning an Icon to a menu is also very easy. Just click on the Add Icon button and from the pop up select the icon you wish, that’s really it.

menu-icons

To add images, maps, or text descriptions to the mega drop down, use the Custom HTML text field to either insert your shortcode or use html to add images.

A few tips:

1- Make this a mega menu? option only works for the Level One items, it has no effect on the rest of the items.

2- Hide The Parent Title? option works only for the level two of items, hiding the title of the column and it has no effect on other items.