Navigation is one of the most important aspects to consider when building a website. When designing a website, choosing the type and placement of site navigation is crucial. The user experience of a website can either be enhanced or broken due to menus or site navigation.
Adobe Muse allows you to quickly create a site navigation system using Menu widgets. Although you can create links to connect the pages manually, Menu widgets offer you an easy and flexible way to add
navigation to your site. Like other widgets, you simply drag the Menu widget onto your page to add menus. When do you so, you find that the menu labels, that are same as the page name, are automatically populated. When you change the page name in Plan View, the menu labels are automatically updated.
You can add vertical as well as horizontal menus. In addition, Adobe Muse allows you to create sandwich menus and rollover states for menu items. Read on to know how to do all of this using Adobe Muse.
Use the Selection tool to drag the widget and place it in the desired position in your layout. For example, you can position a horizontal menu widget in the header section.
Notice that the menu automatically displays the names of the pages that you created, in the same order that they appear in the site map. The menu labels are automatically linked to the pages and they are dynamic. That is, if you later decide to rename or move the pages, the menu is automatically updated. The links continue to work as expected.
Now that you have added the Menu widget to your layout, you can customize this widget to suit your requirements. You can configure menus using the Options panel. The Options panel is a contextual panel that lets you apply changes to update settings that are specific to that widget. Use this panel to control how widgets behave, and how the widget content is displayed.
Configure the Menu widget by using the Options panel. You can configure the following options:
- Menu Type: Specifies which pages to be included in the site navigation. Select Top Pages for including only the first-level or parent pages. Select All Pages to also include the sub pages in the navigation. The child pages appear as submenus. Select Manual to manually choose the desired pages to be displayed in the Menu widget.
- Direction: Specify whether you want to add the menu horizontally or vertically.
- Edit Together: Select this check box if you want to update all the menu items together. By default, this check box is selected. If you do not select this check box, the configurations you choose are applied only to the selected menu item.
- Item Size: Specify whether the menu items should be uniformly distributed by width, or by size.
- Show Left Icon: By default, this check box is not selected. Select this option if you want to add an icon at the left corner of each menu item.
- Show Label: By default, this check box is selected. When you deselect this check box, the menu labels are no longer displayed.
- Show Right Icon: Select Off if you want to disable right icons. Select On if you want to configure icons in the right corner of the menu items. Right icon is a useful option when you want to add arrows to indicate that there are submenus for a menu item. You can also choose the Submenus Only option, to configure a right icon only for those menu items that have submenus.
- Parts Positioning: Specifies the starting point for the internal parts of each tab.
The following procedure specifies how to update the text labels that display the page names in each menu item. Consider a Horizontal Menu widget that uses a very basic design with simple text links. For this example, let us assume that the same font formatting is used for all states.
To edit the text inside the menu item, open the Text panel (Window > Text). With the label selected, use the Text panel to format the text by selecting the required options:
- Font: Select the required Font that you want to apply to the menu label.
- Font Style: Select either Italic or Bold, if necessary, for the menu label.
- Size: Select the Font size for the menu label.
- Color: From the Color drop-down field, either enter the hex code of the color that you want to apply. Or, select the color of your choice using the dropper.
Use the Text panel to configure the margine values for your menu label. If you already have a hyperlink style that you want to apply to the menu label, select the style from the drop-down field next to abc.
To apply a paragraph style, select the style from the Paragraph Style drop-down field in the Text panel.
In the Fill menu, click the color picker, and set the fill color to None. Click the folder icon next to the Image section. In the Import dialog box that appears, browse to select the background image file, named top-nav-over.png. Click Select to choose it. The Import dialog box closes automatically.
Still in the Fill menu, verify that the Fitting option is set to Original Size. Then, in the Position section, click the center of the nine dots. This causes the background image fill to appear with center positioning and no fill color, at original size. Click anywhere else to close the Fill menu.
Choose File > Save to save your work. Click the X in the A-Master tab to close the page in Design view and return to Plan view. Notice that all of the page thumbnails update to include the content that was added to the master page.
The header and footer region guides can be edited only in Master Pages of your site. Whenever you want to edit the size of the header or footer for your pages, double-click the master page to open it in Design view and reposition the guides there.
Adobe Muse also allows you to create a sandwich menu or a mobile menu. When you create this kind of menu, a drop-down submenu appears when you hover over the main menu. To create this type of menu, see Create submenus using Composition widgets.
Every time you create a new top-level page for your site in Plan View, Adobe Muse automatically adds the page to the menu. However, there might be times when you want to test a page before making it accessible to visitors, or hide a specific page. In these cases, Adobe Muse allows you to exclude specific pages from the navigation to ensure these pages are not listed as menu items in the Menu widget.
Perform the following procedure to exclude pages from the Menu widget:
Assuming that you have already created the sitemap for your site, go to the Plan View in Adobe Muse. For this procedure, let us assume you have a sitemap with pages that include Home, Portfolio, My Story, Contact, and Products.
To exclude a specific page, in the Plan View, right-click the page that you want to exclude. Click Menu Options > Exclude Pages from Menus.
For example, if you want to exclude the Products page, right-click Products. Then, select Menu Options > Exclude Pages from Menus.
Now, when you go back to the Master page to view your menu, you can see that Products has been removed from the Menu widget.
To delete the entire menu, go to the page where you have added the Menu widget. Select the widget and press Delete.
In scenarios where you want a menu item to appear without a link, right-click on the specific page in Plan View. Select Menu Options > Include Page Without Hyperlink.
This option is suitable in various use cases while creating a website. For example, if you have a rollover Products page where you want site visitors to only click on product categories and not the main Products label, you can use this option.