The Muse menu widget A to Z
The Muse menu widget A to Z.
Adobe Muse offers a seemingly simple array of widgets that are not much to look at when placed on a page.
These dull grey units hold much flexibility that allow us to create an almost limitless number of useful, fun and exciting menu and navigation units.
The Menu Type Options
In this tutorial, we will take a look at the primary use of the options built into the menu widget. To start let's place a menu unit into a blank Muse site.
By default, the menu will place just a single menu button on the page (if you are in a blank site with no pages).
Let's jump back into Plan mode and add some pages.
I have added About; Services and Contact now go back to the plan view where we placed the menu.
See how the menu widget has automatically added the page names/labels to the navigation as individual items. They are linked to the pages. This is the menu type “Top Level Pages”.
Let's go ahead and add some sub pages in Plan view. I am also going to change the main labels to have all Caps letters. That will reflect on the label appearance in the menu itself.
The Menu Type Options
Returning to our menu on the page change the Menu Type to “All Pages”. This now displays the sub-menus under the services tab and places an arrow next to the services label to indicate that there is a sub -menu.
Let's duplicate that menu so that we can take a look at some other options.
On the second menu change the “Menu Type” to “Manual”. Notice how the menu returns to its original state. Now you have full control over what pages and names you can add.
When you select the menu three plus signs one on the left, right and base of the widget, clicking the plus buttons to the left and right will add a new menu item to the main navigation. Clicking the plus on the base will add a new sub-menu and sub-menu items.
Go ahead and replicate the menu we created using the “All Pages” Menu Type.
To add new menu items to the sub--menu you need to select the sub-menu button, additional item icons appear above, below and the left.
This makes it possible to make almost infinite sub-menus within sub -menus. However, one or two levels at the most are the most functional.
Now we should have two units identical in appearance.
The first menu is built using the data from the pages automatically and so all the buttons will link to their respective pages. Whereas the second menu using the “Manual” menu type, does not have any links to any pages you need to add them manually.
The ability to have both manual and automatically generated navigation means you can have a main navigation, powered by the auto menu option along with sidebar menus that are more section context based. Both are possible from the same menu widget. Awesome.
Let's work with the manually generated menu for the time being to review some other features of the menu widget.
The Direction Options
Using the direction option changes our menu instantly from a horizontal menu to a vertical menu. This is very useful when you have spent time building the styles for one type allowing you to switch it straight to another kind. How cool is that?
We used this method with our Kuva Photography template. It can save you a lot of time.
Let's switch it back to a horizontal menu.
With the tab still selected use the states panel to make sure, you are in the ‘Normal’ state.
Now change the fill color to black (whatever you wish) change the rollover state to red and the active state to green.
Open the spacing panel and change the Horizontal (H) Gutter to one this alters the space between the individual tab elements. Use the Vertical (V) Gutter for vertical menus and sub-menus.
Now the menu should look like this.
Drag the menu out to a 920px width and a 60px height.
Select the entire menu unit and from the fill panel pick an almost black color say #333333.
Select the entire menu and switch the radius options on for all four corners.
Now how about that “Edit together” option?
Select the “HOME” button and switch the left top and left bottom radius options on (10px). Now preview the menu and hover over the “ABOUT” tab we can see that the corners have a radius on them that we do not want.
We just want the left top and left bottom corners of the “HOME” button and the top right and bottom right corners of the “CONTACT” button to have a radius to match the menu bar.
By switching off the "Edit Together" option, we can change the settings of each menu item individually.
WORK FLOW TIP
Make all the style changes to a menu that you want to be on all the tabs first. Then change the individual settings (per tab) with the “Edit together” turned off. This will make for a better work flow. Else you will need to go between the two modes to alter the setting that can slow down your progress.
Go back to the menu and switch the home button corner radius off. We should have squared off menu tabs again now in the widget options uncheck the “Edit Together” check box
Go and set the left top and left bottom of the home button and the right top and right bottom radius settings to 10px. Make sure you are in the “Normal” state in the states panel before you change anything. Muse has a nasty habit of jumping to the “Active” state, and you wonder what’s going on when the menu does not work how you thought it would.
Now when we preview the menu we have lovely with rounded corners at the beginning and end of the menu panel with square buttons in the middle. Perfect.
The Item Size Options
What about the next options in the widget settings? Item size.
When you look at the current menu, we have created all of the buttons the same size.
The Parts Options
The next section of the options, the “Parts” section switches menu features on and off. Change the menu button colors so we can see the different parts better.
With the “Edit together” option back on and select the “HOME” button. Change the color to #C4C4C4.
In the widget, options switch the “Show Left” icon option on. Notice how a grey box appears next to each tab label. You can re-size this box apply a background image, change its color and so on.
You can select either of the left and right icon boxes and transform their size and all other options such as color, background image and so on. Don’t just use the standard icon, experiment.
Click into the “SERVICES” button and change the item label to “CUSTOM SERVICES”.
Notice how the button stays the same width but the spacing to the left and right are now tighter which looks okay, but might look better if all the spacing was the same rather then the button size being equal.
Change the setting to “Uniform Spacing” in the Item size options. The menu now re-sizes its buttons to allow for a uniform left and right spacing per tab.
In the widget options, panel uncheck the show label. Notice how the label text disappears. This allows us to build menus with just icons and no text. Are you starting to see just how flexible this widget is?
See the little arrow pointing down under the services box? It is managed by the next setting “Show Right Icon”. You can show it on all buttons with the “On” option. “Off” turns it off on all tabs and elements, whereas “Sub-menus Only” shows it next to only the tabs that have sub menus.
Finally, the positioning option is the settings allows us to choose a starting point for the internal parts of each tab.
Changing the setting to “Horizontal Top Aligned” places the pieces at the top of the button.
Now you know what all the various options do; we need to build something.
In the next article, we are going to build the Icona menu with just the tools built into Muse.
You don't just have to use the Menu Widget for plan old menus. Experiment. Try it with other widgets you can build all sorts of useful units:
- Set the widget to "Manual" in the menu type and use it as a stand alone button.
- Copy and paste the menu into a Composition Widget target panel and create compact navigation for mobile and tablet devices.
- In manual mode use the Menu Widget as a sidebar menu that offers a more context based navigation for the site zone you are in. We use this in our legal section on the main 123muse.com site.
- Using "Manual" mode create breadcrumb navigation for each page. We use that method in this edition
Muse is meant to be experimented with. See what you can create.