How to make a mega menu

15 minutes to complete this task.
Mega menus are... well mega. They can open up a vast array of navigation options for your websites visitors. Learn how to build a mega menu with both written and video tutorials. 15 minutes to complete this task.

How to make a mega menu.

Submenus are great but sometimes you need even more space in your menus. The term often used for this type of menu is a mega menu.

You will need:

  • A blank Muse site
  • The assets for this tutorials (see below)
  • Take a look at the completed widget:

DOWNLOAD January 2015 - Download Pack

Build the mega menu.

1If you take a look at the navigation on the main 123muse site, our main navigation opens to reveal a search bar, an image slider and additional menu options.

2We can build mega menus with different tools in Muse in this particular instance and to get you used to the idea we are going to the most versatile of widgets - the composition widget.

3Let's start by placing our Icona menu onto a blank page. If you saved it into your library just drag an instance onto the page.

4Select the Portfolio tab, delete the states for the hover and active states. If you have followed the previous tutorials, you will know that we just select the state and click the small trash can icon to remove the applied state settings.

5On the normal state set the fill to solid black and remove/delete the background fill from the icon area too.

6The menu should now look like this.

Addons options

7The flat black space is where we will fit our mega menu check the dimensions of the empty tab they should be 184px by 90px. We have set this tab to blank to make it easier to work with.

8Now let's add a composition widget from the built in Muse widgets. Use the blank widget select and delete the last two triggers so that it looks like this on the page.

Addons options

9Next move the trigger to be above the target and delete the hover, mouse down and active states of the trigger.

10Now set the border to 0, change the dimensions to 184px x 90px. The widget should now look like this.

Addons options

11Select the target are of the widget. Set the fill to black and the border to 0. Change the height to 300px and the width to 920px. Also move the target area into the middle of the screen it should now look like this.

12[Image 4]

13Select the trigger and apply the same effects gradient fills and effects as the main buttons on the menu as in the previous tutorials. The normal state should be the black gradient; the hover the green gradient with the inner glow and the active state the blue gradient with the inner glow. Then move trigger into the exact spot the menu then we set to blank. Finally, move the target area into place just underneath the trigger so that it looks like this.

Addons options

14Now use the rectangle tool and make a rectangle that is 184px wide and 50px high set the border to 0 and the fill to transparent.

15Add a background image fill using the same icon we used before which in our case was the briefcase. Set the fill to centered and scaled to fit.

16Now move the rectangle into the trigger button. One of the easiest ways to do this is to copy or cut the rectangle then select the trigger (ensure you are in the normal state) and paste the item into the trigger. You may need to adjust its position with the arrow keys to get it to line up perfectly with the other icons.

Addons options

17We are nearly done here already just select the trigger and set the widget options to the following settings.

Addons options

18Now preview the page. Notice how the menu acts in exactly the same way as before, when you hover over the portfolio button however the mega menu area now displays.

19In our image below, we have added some additional menu widgets as an example. We also added a 1px grey line to the top of the target panel and a 10px radius to the bottom let and right, or the target are too.

Addons options

20Just to recap we have added a mega menu on top of our Icona menu to give us a lot more options in a small area. You could use the same method to build an entire menu with the composition widget. The point here is that by using a combination of widgets we can create amazing, useful tools to assist us with our Muse projects.

21Don't forget to save the new menu with mega menu to your library.

Now let's build another menu but this time for mobile devices.

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 2015 - All rights reserved