Responsive Menu

 v.1.0

Important Tips

Overview

Widget Options

Menu

Assigning

Page overlay

Effect

Close Button

RESPONSIVE

MUSE

MENU v.1.1

ADOBE MUSE WIDGET

OVERVIEW

Responsive Muse Menu is a multipurpose navigation widget. It allows creating all types of menus, mostly can be used to create a menu that consistently work through all different devices. The menu widget works with the new breakpoint system in muse and can be fully customized for each breakpoint separately.

WIDGET OPTIONS

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

MENU

ASSIGNING

PAGE OVERLAY

EFFECT

CLOSE BUTTON

*Do not remove the close button and the trigger

 

By placing the menu on the page, you will get:

 

  1. Widget itself
  2. Menu Container
  3. Menu Trigger
  4. Close Button

 

The Main section, Menu container, and menu trigger are the necessary parts of the menu, and you will have to keep them to have the menu functional. However, the close button cannot be removed wither, if the close button is removed, the menu will not function properly.

 

In case you do not want to have the close button, you can simply disable the button in the menu option panel > CLOSE BUTTON. But remember to keep it in the page. The button will not appear anywhere on the page if it is disabled through the widget option panel, so do not worry about having it on the page.

 

 

 

 

 

WIDGFET OPTION

MENU

 

 

 

1. Push Effect

Except for the "Fade-in" option, the push effect can be checked for all the positions. The effect will be applied to the page as the menu opens and pushes the page along with the menu, as it is entering the page.

 

 

 

2. Position

There are 9 options available for the position where the menu opens and is placed on thepage:

 

  1. Top
  2. Right
  3. Bottom
  4. Left
  5. Top-Fullscreen
  6. Right-Fullscreen
  7. Bottom-Fullscreen
  8. Left-Fullscreen
  9. Fade-In

Positions & Alignment

 

Depends on the position you pick, the alignment will be limited to Horizontal or vertical. For example, if you select "left" for the position, the width of the menu will be automatically eaqual to the width of the menu container, so there will not be any horizontal alignment needed. But you can control the Vertical Alignment to have the menu at the top, center, or bottom.

 

 

 

 

3. Alignment

The Alignment options can be used to align the menu container on the page, when the menu is cliked open.

 

 

 

4. Menu movement duration

To determine how long it takes for the menu to opens in seconds.

 

 

 

 

 

WIDGFET OPTION

ASSIGNING

 

 

 

1. Menu Trigger Graphic Style

Even though the trigger comes by default when you place the menu on the page, but if you decided to use another other object as the trigger, you can use the object by assigning a Graphic Style to it, and type the Style name in this option box.

 

 Click Hereto see how you can use Graphic Style to assign an object.

 

 

 

1. Menu Body Garaphic Style

Even though the Menu Body comes by default when you place the menu on the page, but if you decided to use another object as the trigger, you can use the object by assigning a Graphic Style to it, and type the Style name in this option box.

 

Make sure that the default Menu Body is removed before using another object for the Menu Body.

 

it is strongly suggested to keep the default Menu Container and just drag/drop your objects inside the default Menu Body to create any layout for the menu.

 

 

 

 

 

WIDGFET OPTION

PAGE OVERLAY

The options in Page Overlay section allow you to style the color and the opecity of the overlay layer that covers the page, when the menu is clicked open.

 

 

 

 

 

WIDGFET OPTION

EFFECT

 

 

 

1. Grayscale Level

Enable the effects first, by clicking on the "Enable Effect" checkbox.

 

Larger amount will return less saturation on the page, when the menu is open.

 

For example, if you type 100 as the value for the Grayscale option, when the menu is opened, the page becomes completely black & white, note that the effects will not be applied to the menu itself but only to the page.

 

 

 

1. Blur Level

Enable the effects first, by clicking on the "Enable Effect" checkbox.

 

Larger amount will return more blurry effect on the page, when the menu is open.

 

For example, if you type 25 as the value for the Blur Level option, when the menu is opened, the page turns completely into a blurry image, note that the effects will not be applied to the menu itself but only to the page.

 

 

 

 

 

WIDGFET OPTION

CLOSE BUTTON

 

 

 

1. Close Button Graphic Style

A Close Button will be placed on the page by default, since the default close button is a State Button, you can pretty much create any layout for your Close Button. But if you decided to create another Close Button, first remove the existing one and then use the Graphic Style panel to assign any object as the Close Button.

 

 Click Hereto see how you can use Graphic Style to assign an object.

 

 

 

1. On Menu & On Page Overlay

If you decided not to have any close button, you can still click on the page to close the menu, unless you picked "Fade in" or any of the "Fullscreen" positions (in the position dropdown option).

 

The Close Button On Menu will place your close button on the menu, this option must be checked if you picked  "Fade in" or any of the "Fullscreen" positions (in the position dropdown option), so you can close the menu.

 

Attached To Cursor On page Overlay will attach your Close Button to the mouse cursor, so it shows the visitors that they can click anywhere on the page to close the menu.

 

The Position in Menu and Distance from sides options are available only if The Close Button On Menu option is checked.

Important tips

  • An entirely new menu in a breakpoint

     

      1. In the new breakpoint, where you need an entirely new menu, right-click on all the aspects of the menu (Menu Widget, Menu Container, Close Button, Menu Trigger) and select "Hide in breakpoint"
        1.  
        1.  
      2. Place a new copy of the widget from the Library pnel into the page, or copy/paste  all the aspects of the menu (Menu Widget, Menu Container, Close Button, Menu Trigger) from another breakpoint into the new breakpoint.
      3.  
      4. Now you have a breakpoint that has a new copy of the menu, but you need o hide this new copy from other breakpoints. So go to every other breakpoints and you will see two copies of the menu; the original one and the one you just placed in the new breakpoint, so you need to right-click and "Hide in Breakpoint" the new copy in all the breakpoints except in the one you want the new copy in it.
        1. The idea is to get a new copy of the menu only in the breakpoint/s that in which you want a different menu, but keep the original one in the other ones.
        2.  
      5. Now you can style the new copy of the menu and you will have the option to change every aspects of it, such as position and the entire content.
  • Removing the Close Button

     

    The Close Button cannot be removed from the page, you need to keep it in the design view or the menu will not function. To have it removed, you can disable it o the widget option panel > Close Button section

  • Where to place the Menu Container in the design view?

     

    The best way too keep the Menu Container, in the design view, is to place it outside of the working area, in the grayed area, at top-left side of the page. Make sure that the menu container is not at the right side, outside of the working area, but somewhere on the left, or it may cause the horizontal scrollbar appears on smaller screens.

     

    Having said that, the menu container can be placed almost anywhere and it will not appear in the preview/published version, but placing it at the top-left outside of the working area is the safest option.

  • Scrollbars appearing in the menu when preview in browser

     

    The scrollbars in the menu are not disabled so you can have the option to have them if they are needed, and the menu is taller/wider that the page.

    However, in most cases, users do not want the scrollbars in the menu but they appear by default.

    There are a few ways to make sure that the scrollbars will not appear in the preview/published version of the site:

     

     

    1. Make sure that the Menu Container is not wider than the breakpoint's width.
    2. If you decide to change the  "Responsive width" for the Menu Container into "none"
    3. then make sure that the width of the Menu Container is smaller than next breakpoint's width (the breakpoint that is smaller thatn the one you have the container in it).

     

     

Features

Documentation

Responsive Muse Menu

DOCUMENTS

FAQ

MAIN Widget

THUMBNAIL Widget

BUTTON Widget

Fade

Copyright © 2016 QooQee.com | QooQee Muse Templates & Widgets.

Adobe Muse Widget by QooQee.com