Video | Add a menu

Video | Add a menu
Adobe Press

Add a Horizontal Menu widget to the page

In this section, you'll experiment by adding another Horizontal Menu widget, to use as a submenu for a single page. You'll set the type of menu to manual, so that you can type the menu item labels and set up the links yourself. This is a very helpful strategy, especially when you want users to be able to navigate within a specific section or a specific page of the site. For this sample project, you'll link the manual menu items to the anchors you created in the previous section. Follow these steps to add a manual Horizontal Menu widget:

  1. While editing a page in Design view, open the Widgets Library.
  2. In the Widgets Library panel, click the Menus section to expand it. Select the Horizontal Menu widget and drag it from the panel to the top of the page area in the food page.

When you first drag the widget to the page, it displays the default formatting and automatically displays the page names in the menu items. You'll update the settings in the Options panel to set the menu up so you can enter custom menu items to link to the regions in the food page.

  1. While the Horizontal Menu widget is selected, click the blue arrow button to open the Options panel. Use the Menu Type menu to select: Manual. Leave all other default settings, as shown in the image below.
Menu Widget options panel
Update the Menu Type to Manual in the Options panel.

  1. Click anywhere outside the Options menu to close it.

When you review the Horizontal Menu widget now, you'll see that a single generic menu item named [name] replaces the automatic menu items that were originally displayed. The next step involves manually adding the menu items.

  1. Click three times on the Horizontal Menu widget to select the label. Use the Text tool to select the default label text and enter a new menu item name. For example, Breakfast.
Update the name of the first menu item in the manual menu.

  1. Switch back to using the Selection tool. Notice that three plus (+) sign icons appear on the left, bottom, and right sides of the menu item. Click the plus (+) sign to the right of the Breakfast menu item. This operation adds a new menu item to the right.
  2. Select the label in the new menu item. Using the Text tool, select the default label text and update it to: Lunch.
  3. Repeat steps 6 and 7 to create more menu items.

Style the menu items in the Horizontal Menu widget

Since the Edit Together option is enabled in the Options panel, the changes you make to one menu item are automatically applied to the other menu items. Follow these steps to revise the appearance of the menu:

  1. Select the menu item for the Breakfast button. The Selection Indicator displays the word: Menu Item. Press Escape if you accidentally select the label inside the menu item.
  2. Open the States panel by selecting its tab or choosing Window > States. Select the Normal state.
  3. Use the Fill Color Chip to set the color of the Normal state of the menu item to the swatch you renamed cream-menu (or enter the hexadecimal color value: #E9916F).
  4. In the Control panel, click the bottom left and bottom right corner radius buttons, and then enter the corner radius value to 100, to create buttons that are square on top with rounded corners. These buttons are similar to the ones you created previously in Part 5 when you styled the tabs of the Tabbed Panel widget.
  5. In the States panel, select the Rollover state. Use the Fill Color Chip to set the color of the Rollover state of the menu item to the swatch you renamed cream-menu (or enter the hexadecimal color value: #E9916F). Notice that the Mouse Down state updates automatically.

In this example, the Normal, Rollover, and Mouse Down states all display the same appearance. This design uses a different color for the Active state, to alert visitors which page region they are currently viewing. You'll apply the new color to the Active state next:

  1. In the States panel, select the Active state. Click the Fill color chip in the Control panel and select the color that you renamed brown-menu in Part 3, or enter the color value: #571E00.

Now that you've updated the appearance of the menu items for each state, you'll update the labels.

  1. Click the Breakfast item three times to select the label. While the Normal state is selected in the States panel, click the head-tabs style in the Paragraph styles panel to apply it. This is the same style you used to style the Tabbed Panel widget in Part 5.

When you apply the formatting to the label to the Normal state, the other states update to match automatically. This design uses the same labels for all states, so the styling for the manual Horizontal Menu widget is now complete. The only remaining tasks are to position it on the page and pin it in place.

  1. Use the Selection tool to reposition the Menu widget, so that its top edge fits snugly against the bottom of the header rectangle. Make sure there isn't any space between the header and the Manual menu widget.
  2. While the entire Menu widget is selected, click the top center pin position in the Pin interface in the Control panel. This will ensure that the manual menu doesn't move from its location directly below the header when the long page scrolls down. The pinned Menu widget creates a persistent navigation for the page, making it easy to jump between regions.

In the next part, you'll use the Links Menu to add the links to the anchors you created earlier.

Add a Horizontal Menu widget

  1. With your master page open for editing in Design view, open the Widgets Library. If it is not already open, choose Window > Widgets Library.

  2. In the Widgets Library panel, click Menus to expand the list of Menu widgets. Select the Horizontal Menu widget.

    Click the Menus item to access all Menu widgets
    Click the Menus item to access all Menu widgets.

  3. Drag the Horizontal widget to the header section of the page. Note that by default, the dynamic menu items automatically display the names of the pages that exist in your sitemap.

  4. Use the Selection tool to drag the Horizontal widget onto the brown ribbon graphic in the header section that you placed previously.

    Position the Menu widget
    Position the Menu widget on top of the brown ribbon background image in the header.

  5. Click the blue arrow at the right of the menu to open the Options menu. In the Menu Type section choose All Pages to make sure that both the top level and sublevel (the second tier of the sitemap, the Origins page) appear in the navigation.

  6. In the Options menu, in the Item Size section, choose Uniform Size. Notice that the option Edit Together is enabled. This setting, enabled by default, means that when you update one menu button, all the other menu buttons are updated to match automatically. Usually you'll want to keep this option selected, although occasionally you may want to disable it to make one button look different from the others.

  7. Click back on the menu on the page to select it, and then press and drag the right side of the widget to spread out the menu items to line them up with the brown ribbon background.

  8. Click back on the menu on the page to select it, and then press and drag the right side of the widget to spread out the menu items to line them up with the brown ribbon background.

  9. Click the color picker in the Control panel and set the text to white. Then use the Text Size field to set the text to 12 point.

    Choose text size and color
    Set the font color and point size to control the text buttons in the Horizontal Menu widget.

Create rollover states for menu items

  1. Using the Selection tool, select the HOME button area and open the States panel. Notice that the button's default states are already defined. Click the Rollover thumbnail in the States panel to edit that state.

  2. With HOME still selected, use the Fill color picker and choose no fill (transparent) by clicking the white color chip with the red diagonal line.

  3. Click the Text tool and use the color picker in the Control panel to choose an off-white color for the Rollover state.

  4. In the States panel, select the Mouse Down state. While the Text tool is still selected, set the Mouse Down text to a darker color by selecting the color chip in the color picker of the Control panel.

  5. In the States panel, select the Active state. Click the Fill link in the Control panel to open the Fill menu.

  6. 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.

  7. 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.

    Define button states
    Define the active state of the menu item.

    Since the default option Edit Together was enabled in the Horizontal Menu's Options menu, all the changes you made to the Home button have been automatically applied to all of the buttons in the navigation bar.

  8. 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.

    Note:

    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.

Working with Menu widgets

Working with Menu widgets
In this video, presented by Brian Wood, you'll learn how to insert a menu widget to your page.
Adobe Press - Peachpit

The Main master page that you created in the previous section is almost complete, because it is inheriting all of the contents in the A-Master page. Also, the guides of the original master page are inherited on the duplicated pages when you apply other masters. However, master pages typically contain site navigation, so you'll add that next.

Adding a horizontal menu to the Main master page:

  1. In Plan view, double-click the Main master page thumbnail to open the page in Design view and edit it.
  2. Open the Widgets Library by clicking the Widgets Library tab in the panel set. Or if it is closed, choose Window > Widgets Library to open it. When it is open, a check mark is displayed next to the Widgets Library item in the list.
  3. In the Widgets Library, click the Menus section to expand it. Select the Horizontal widget and drag it from the panel to the footer area of the Main master page.
Menu Widget options panel

The black panel that appears whenever you first drag a widget to a page is called the Options panel. Click away from the panel to close it, and then click the blue arrow button displayed to the right of a widget whenever you want to access it again.

  1. Use the Selection tool to position the Menu widget on top of the existing rectangle with the tiled background image in the footer, near the top of the gray area and centered vertically.

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. Even better, the names of the pages are automatically linked to the pages and they are dynamic. So if you later decide to rename or move the pages, the menu will update automatically and the links will continue to work as expected. Widgets are intuitive to use, so you can focus your efforts on customizing how they look to match your site design.

Although each type of widget provides different functionality, many of the concepts you'll use when working with widgets are the same. You locate the widget that you want to use in the Widgets Library and then drag it out onto the page. Each widget contains a hierarchy of nested widget elements. As you click on a widget, you can continue clicking to drill down to its sub-elements. As you do this, you’ll see the Selection Indicator in the top left corner display the name of the element that is currently selected.

For example, when you first click the widget, the widget itself is selected. If you click again, you may select a container, and then click again to select the text frame inside a container. To work your way back out of the sub-element you’ve selected, press the Escape key. You can also simply click on the page outside of the widget area, to deselect it altogether.

While the entire widget is selected, you can reposition it. You can also drag its transform handles to scale or resize the dimensions of the entire widget. You can set the fill and stroke color, as well as applying styles to control the appearance of the entire widget.

Edit the labels in the Menu widget

In this part, you'll see how to update the text labels that display the page names in each menu item. Since this Horizontal Menu widget is in the footer, it uses a very basic design with simple text links that use the same font formatting for all states.

  1. While the page is selected, click the widget once, so that the word Menu is displayed in the Selection Indicator. Click the food button, to select food menu item. The Selection Indicator displays the word Menu Item. Click the word food once again, to select the label (the part of the widget that contains the word food). The Selection Indicator displays the word Label.
  2. In the States panel, make sure that the Normal state is selected.
  3. Open the Text panel by clicking its tab or choosing Window > Text.
  4. With the label selected, use the Text panel to format the text by selecting these options:
    • Font: Droid Serif
    • Font Style: Italic
    • Font Size: 15
    • Font Color: #EEE5C4

 

Menu text options
Set the options in the Text panel to update the appearance of the menu label.

Note: Droid Serif is a web font that you can choose to download by choosing Add Web Fonts from the Font menu. However, you can also choose to use any web safe font or System font you have installed on your machine, if you prefer. To learn more about working with web fonts, see Typography.

Notice that after making the changes to the text formatting, all of the labels are updated to use the same font styling. This occurs because Edit Together is enabled in the Options panel. You can always disable the Edit Together option, if you want to create a menu that has a different font formatting for each menu item.

You'll use this font style throughout the site design, for visual consistency. In the next section, you'll see how to save the attributes as a paragraph style, so that you can easily reapply the same formatting to other text in the site.

Configure and customize Menu widgets

To configure widgets, you update the settings in the Options panel. The Options panel is a contextual panel that lets you apply changes to update settings that are specific to that widget. Some widgets have more options than others, but you’ll always use this Options panel to control how widgets behave, as well as how their content is displayed.

Once a container element is selected, you can set the Fill and Stroke options to update its appearance. When text is selected, you can use the Text panel or the text options in the Control panel to style the text. Sometimes, you’ll edit the text labels in widgets (although unless you set Menu widgets to use the Manual Menu Type, the page names are already set up for you based on the pages in the site map).

  1. Click the Menu widget in the footer section of the page and notice that the Selection Indicator displays the word: Menu. Click the blue arrow button to access the Options panel.
Footer Menu Widget options

For this example, ensure that the following default options are set:

  • Menu Type: Top Level Pages
  • Direction: Horizontal
  • Edit Together: Enabled
  • Item Size: Uniform Size
  • Show Left Icon: Disabled
  • Show Label: Enabled
  • Show Right Icon: Submenus Only
  • Parts Positioning: Horizontally; Center-Aligned
Menu options
Use the default settings to configure the Horizontal Menu widget.

The Options menu settings enable you to configure how the menu will behave.

  1. Click anywhere else on the page to close the Options menu.

Next, you'll learn how to edit the appearance of the buttons in the menu, and how to control the text formatting to match the site's design.

Configure the behavior and display of widgets

After you drag a widget out of the Widgets Library and onto a page, you'll see a blue arrow icon appear in the top right corner of the widget, when the widget is selected. Click this blue arrow icon to open the Options menu.

Each widget has different options available, so the options you can set in the interface of the Options menu vary. The settings control the behavior of the widget (such as choosing whether a slideshow will auto play or whether visitors must click the thumbnails to see each larger image) and the display of the widget (such as specifying the type of transition that will animate as each new image is displayed).

As you design websites, you'll have an opportunity to make these settings and work with your clients to find the best choices for a specific project. Remember that at any time, even once a site has been published online, you can return to the .muse file, select a widget, click its blue arrow icon to access the Options menu, and make new settings to change the widget. Later, after you publish the site again, the changes you make are reflected on the live website.

With Menu widgets, you can have the widgets dynamically display the page names of the site and automatically create the links to those pages. This makes it very easy to add site navigation to pages based on your sitemap in Plan view, and you never have to worry about creating broken links. You can also disable specific pages so that they do not appear dynamically in the Menu widgets by right-clicking the page's thumbnail in Plan view and deselecting the option Include page in Navigation. This option is enabled by default (and displays a checkmark when it is enabled).

Alternatively, you can also choose to set up Menu widgets manually, if you would prefer to name the buttons yourself and add the links to specific pages, rather than allowing Muse to create the menu items. In the Options menu, in the section named Menu Type, you can choose the Manual option.

Choose Manual
Choose the Manual option in the Menu Type settings if you'd like to create a custom menu manually, rather than generate the page names and links dynamically.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy