Muse

Menu Smart

Important Tips

Overview

Widget Options

Main Settings

Name

Checkbox

Timing

Responsive Options

muse

menu

smart

ADOBE MUSE WIDGET

OVERVIEW

Muse Menu Smart is the best method of having a menu on phones and tablets. When users are viewing your site on a smaller screen, typically when they’re scrolling up, they’re trying to reach the top of the page to access the menu.

This Muse widget is great for use on mobile and tablet devices. It allows you to hide the menu when users are scrolling down, allowing users to focus on your content. The menu comes back into view, when users need it, as they scroll up.

 

It can also be used for desktop if you want to have your menu show up after the user scrolls a certain distance down your page. This could be useful for introducing the menu after a user scrolls past a header or photo. Or you could use Muse Menu Smart to always have your menu showing.

WIDGET OPTIONS

The widget option panel consists of two main sections. Each section is to control specific functionality. See the sections below, and click on each one to see the related documentation.

MAIN SETTINGS

TIMING

 

 

 

 

 

WIDGET OPTION

MAIN SETTINGS

 

 

 

1. Menu Graphic Style Name

The Menu Graphic Style name must match the graphic style name of your menu. Keep the Menu Graphic Style name consistent and simple. Do not use any spaces, special characters, and/or non-English characters for the name.

 

Click here to get more information about Graphic Styles.

 

 

 

2. Checkbox

The checkbox "Disappears when scroll down, appears when scroll up" can do two things.

 

Checking this box will cause your menu to disappear when you scroll down, and reappear when you scroll up. It is recommended that you leave this checked for mobile and tablet devices.

 

Unchecking this box will make it so that your menu is always showing. This is recommended for desktop.

 

 

 

 

 

WIDGET OPTION

TIMING

 

 

 

1. Animation Duration

Menu Smart also allows you to customize your menu even more by giving you the option to change how your menu is animated. Control how slowly or quickly your menu appears by changing the seconds with Animation Duration.

 

 

 

2. Easing

Control how your menu is animated with six different easing options:

Linear, Ease In, Ease Out, Ease In & Out, Ease Back, Ease Cubic

responsive options

You may want to have your menu always showing on desktop, but hidden on tablet or mobile. With Muse Menu Smart, it’s easy to make your menu behave differently on desktop, tablet, and mobile devices.

 

Follow the steps below to have your menu hidden on mobile and tablet, but always showing on desktop.

 

1. Create menu in desktop breakpoint, assign a graphic style to it, drag menu smart onto canvas and give it the same graphic style name. Uncheck the box “disappears when scrolls down, appears when scrolls up” so that the menu is always showing.

 

2. Copy the menu in your desktop breakpoint and paste it into your tablet breakpoint.

 

3. In your desktop breakpoint right click on the menu and select “hide in other breakpoints”.

 

4. Go back to your tablet breakpoint and select your menu. Assign a new graphic style to it with a new name to differentiate it from the menu on your desktop.

 

5. Open the Muse Menu Smart options and change the name to the new name you just assigned to the tablet version of your menu.

 

6. Check the box “disappears when scrolls down, appears when scrolls up” so that the menu is hidden when users scroll down on your site.

 

Now when you preview your site, the menu should always be showing on desktops and it should be hidden when users scroll down on their tablets and phones.

important tips

If the widget isn't working properly for you, review the following tips.

 

  • This widget only works for objects that are pinned to the top of the browser. You can’t have objects coming in from the left, right, or bottom of the browser with this widget.
  •  
  • Make sure that your Graphic Style Name and your Menu Graphic Style name are exactly the same. If they aren’t the same, the widget will not be connected to your object. For example, “Style” is not considered the same as “style”. Also make sure that you aren’t using any spaces, special characters, or non-english characters.
  •  
  • Make sure that your page is long enough to use this widget. Users should be able to scroll past where you place the widget. An easy solution is to place the widget at the top of the page so that it always appears when users scroll up.

You may want to have your menu always showing on desktop, but hidden on tablet or mobile. With Muse Menu Smart, it’s easy to make your menu behave differently on desktop, tablet, and mobile devices.

 

Follow the steps below to have your menu hidden on mobile and tablet, but always showing on desktop.

 

1. Create menu in desktop breakpoint, assign a graphic style to it, drag menu smart onto canvas and give it the same graphic style name. Uncheck the box “disappears when scrolls down, appears when scrolls up” so that the menu is always showing.

 

2. Copy the menu in your desktop breakpoint and paste it into your tablet breakpoint.

 

3. In your desktop breakpoint right click on the menu and select “hide in other breakpoints”.

 

4. Go back to your tablet breakpoint and select your menu. Assign a new graphic style to it with a new name to differentiate it from the menu on your desktop.

 

5. Open the Muse Menu Smart options and change the name to the new name you just assigned to the tablet version of your menu.

 

6. Check the box “disappears when scrolls down, appears when scrolls up” so that the menu is hidden when users scroll down on your site.

 

Now when you preview your site, the menu should always be showing on desktops and it should be hidden when users scroll down on their tablets and phones.

  • You can’t have objects coming in from the left, right, or bottom of the browser with this widget.
  •  
  • If they aren’t the same, the widget will not be connected to your object. For example, “Style” is not considered the same as “style”. Also make sure that you aren’t using any spaces, special characters, or non-english characters.
  •