Free Adobe Muse Menu Widgets

Posted on  by

Learn how to add and configure menus for your Adobe Muse site. Learn how to create mobile menus, rollover states, and edit menu labels.

Note:

Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.

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.

Free Adobe Muse Menu Widgets Free

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.

A collection of entirely free design resources for Adobe Muse such as Library Widgets, Icons, Colors, Buttons, and Tutorial Resources. Download 200+ Adobe Muse widgets, themes, templates and resources for one low price. Join MuseThemes.com, the web's largest online Muse community!

  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. Depending on the design of your site, and where you want to place the menu, select one of the following:

    • Horizontal to add a horizontal menu.
    • Vertical to add a vertical menu.
    Select either the vertical or the horizontal Menu widget

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

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

    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.

  4. Click the color picker in the Control panel and set the color for the menu. Then, use the Text Size field to set the text size for the text in the menu.

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

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.

  1. Select the Menu widget, and click the blue arrow at the upper-right corner of the widget. The system displays the Options panel.

    Configure the Menu widget from the Options panel

  2. 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.
    Configure Menu widgets by using the Options panel

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.

  1. Double-click and select the menu label that you want to edit.

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

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

  4. To apply Fill and Stroke to the menu labels, double-click and select the menu label. From the Toolbar on top of the page, select the Fill color and the Stroke color.

    You can also edit the Stoke Weight and enable the corner radius for the menu labels from the Toolbar.

  1. Using the Selection tool, select the menu label for which you want to create the rollover state. 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 the menu label still selected, use the Fill color picker and choose no fill (transparent) by clicking the white color swatch 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 swatch 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.


    Since the default option Edit Together is enabled in the Horizontal Menu widget, all the changes that you made to the menu label 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.

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.

Adobe Muse Widgets Torrent

Perform the following procedure to exclude pages from the Menu widget:

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

    If you go to the Master page and drag a Menu widget, you see that all the pages are included as part of the menu.

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

    Note:

    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.

Working with Menu widgets

Muse Video Widget

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

Free Adobe Muse Menu Widgets Windows 10


More like this

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Free Adobe Muse Menu Widgets Download

Legal Notices | Online Privacy Policy