In the previous sections of this article you learned how to extend the behavior of slideshow widgets by scaling the contents to display full screen, staggering the position of slideshow thumbnails, and configuring the slideshow to display in a lightbox.
Next you'll learn about working with Composition widgets to build site navigation with submenus. Specifically, you'll use the option to create a menu item that displays a submenu when a visitor rolls their cursor over the active area and hides the same submenu with the visitor rolls their cursor off the active area that triggered the submenu to open. You can also see how to configure a submenu that hides in the event that the visitor chooses not to click any of the links in the submenu and simply rolls their cursor off the submenu itself.
The ability to create these types of interactive submenus is handy when you are building a navigation bar for a site with many different subsections. In earlier versions of Muse, the submenu would appear when a visitor rolled over a menu item, but then would not disappear unless they rolled over a new menu item at the top level or clicked one of the links in the submenu to actively visit a new page in the site.
The Show Target and Hide Target menus are helpful when you want to replicate a common menu behavior: when a visitor rolls their cursor over a menu item (on rollover), a submenu with links is displayed. The visitor can optionally click the links, or they can roll their cursor outside of the window area to hide the window. It is not necessary to click a Close button to hide a submenu when this option is enabled.
This feature is available when working with the following Composition widgets:
- Featured News
The Options menu offers two settings for showing the target container:
And provides four options for hiding the target container:
- On Click
- On Rollout
- On Rollout of Trigger and Target
In this section, you'll see how to use the on rollover behavior to show the target container and the on rollout of both the trigger container and the target container to hide the target container. You can create menus with a variety of behaviors by applying different values to the Show Target and Hide Target settings in the Options menu.
Follow the steps below to learn how you can enable the Hide on Rollout settings for Composition widgets to create a menu bar that hides and shows submenu links based on visitor interaction:
- In Design view, add a blank Composition widget to the page by dragging it from the Widgets Library.
- Click twice on one of the Trigger containers. The first click selects the entire Composition widget and the second click selects the Trigger. Using the Selection tool, move all three Trigger containers to the top, above the larger Target container, and space them evenly (see Figure 11).