How to make a mega menu
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:
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.
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.
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.
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.
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.
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.
17We are nearly done here already just select the trigger and set the widget options to the following settings.
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.
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.