menu

Overlay Menu Tutorial

Description

A stunning and fully customizable overlay dropdown menu triggered by a menu toggle. Use the built in menu, or create your own custom menus. Style to your hearts content with a wide variety of styling, sizing, and layout options.

Getting Started

Using The Built-in Menu

Setup is a breeze if you want to use the built in RapidWeaver project menu. Just drag and drop the stack into the Stacks editor. Then refer to the Settings section to learn how to customize the appearance.

Creating A Custom Menu

Enable "Use Custom List" in the stack's General Settings.

Adding List Items

You will see that a new stacks list item has appeared in the Stacks editor, followed by a [ + List Item ] button for adding additional items to your list.

Editing List Items

Click on a list item to edit it's settings.

Here you will find a "set link" button that will allow you to choose where you want the list item to link to. It uses stacks link creation window, so you can easily link to a page on your RapidWeaver site, or link to an external site.

Link Title

Use this setting to define what text displays in the menu item.

Link

Define where the link navigates to.

Level

Select what level the menu item will appear on. Use this setting to create dropdown menus of multiple levels. By default, added links will be set to "Top Level", meaning the list item will be always be shown. You can create a dropdown menu by placing a new list item directly underneath a Top Level element, and then changing the level to Sub Level 1, like so:

Doing so will create a dropdown menu with the Sub Level 1 item underneath the preceding Top Level item.

You can create more sub levels by following the same rules. For example, create a third level of list items by placing some Sub Level 2 items directly underneath a Sub Level 1 item. You can create up to 5 levels deep. This should be plenty, we've chosen this amount because having more than 5 levels of items is way too confusing for a user. We recommend going no more than 2 or 3 levels deep, unless absolutely necessary.

Add Subtitle

Enable this to define a subtitle.

Add List Icon

Enable this to define an icon to display next to the title. Ionicons and Font Awesome icons are built-in to the stack.

To use an icon add the appropriate class names defined just like in the examples below.

Ionicon Example: 

icon ion-ios-home

Font-Awesome Example: 

fa fa-home


See full list of usable Font Awesome icons
See full list of usable Ionicons icons

Completion

Continue adding list items and editing the settings to complete your custom menu.

Settings

General Settings

Toggle Position

Select where in the window you want to place the toggle. "Fixed" options will scroll with the page. "Inline" options will not scroll but instead display wherever you have placed the stack.

Menu Align (New in version 2.0.0)

Select the horizontal position of the menu.

NOTE: When using the "Left" and "Right" options the footer content will display in the center as opposed to below the menu.

Text Alignment

Select the horizontal alignment of the menu text.

Font

By default, the menu will inherit whatever font is being used by the RapidWeaver project. Select "Custom / Webfont Helper" to use a custom font. In the input fields you can declare a font name (case sensitive) of a font you have loaded or the name of a Google Font you have added with the included Webfont Helper stack.

Width

Define how wide you want the menu to be.

Footer Width

Define how wide you want the footer content to be.

Use Custom List

By default the Overlay Menu stack will use your RapidWeaver site menu.

This option can be used if you do not want to use your RapidWeaver project menu and instead want to create your own custom menu with your own links.

Overlay

Overlay Background

This is where you can set the background of the screen when the menu is active. The Options are fairly standard and easy to setup.

One thing to note is that the IMAGE BACKGROUND has a special image cover, for images that might make text harder to read. This image cover is simply a color option with the ability to change the opacity. Increase or decrease the opacity depending on your image, and how visible your menu text is.

Overlay Opacity

Here you can set the opacity of your Overlay Menu's background. Set it to 1.0 to make the menu fully opaque, or set it to a lower value to make it transparent.

Toggle

Select what to display inside the toggle. by default the built-in menu icon will display. You have the option to add custom text, a custom icon, or remove the toggle contents all together.

When selecting a "Custom Icon" option a "drop stacks here" section will display in the Stacks editor. Here you can drag and drop a custom image or add an HTML stack to declare an Ionicon or Font Awesome icon.
See full list of usable Font Awesome icons
See full list of usable Ionicons icons

Ionicon Example: 

<i class="icon ion-ios-menu"/></i>

Font-Awesome Example: 

<i class="fa fa-bars"/></i>

Match Menu Width

Enable this to make the toggle stretch to match the width defined for the menu in the General Settings.

More Settings

The remaining options are very straight forward. I recommend playing around with them to see what happens. If you change them, the menu preview with update too, so you can easily tweak your menu and see the changes right away.

Background

This is where you can set the background of the menu items. The Options are fairly standard and easy to setup. If a background color is enabled options to adjust the item padding and corner radius will appear.

Customize Submenu Items

By default, submenu items will match the appearance of the top level items. Enable this to set different background and text colors for the submenu items.

Make Parent Items Navigable

By default, parent item will not direct the user to a link, but instead open the dropdown to view sub level items.

In some cases, you might need parent items to link to pages as well. For these cases you can enable this setting to have parent items link to pages. The dropdown menu can still be opened by clicking the dropdown icon on the right.

Animate Dropdown Arrows

Enabled by default, this will animate the rotation of the dropdown icons when a parent item has been clicked.

Advanced

Unique Menu ID

Define custom ID that you can add to links to enable them to open up your Overlay Menu. This value is case sensitive and should not include any spaces or special characters other than dashes (-) and underscores (_).

When creating a link, add a "data-id" attribute just like in the image below. Replace the UNIQUE_MENU_ID portion with your Overlay Menu's Unique ID value.

HTML examples:

<a href="#" data-id="UNIQUE_MENU_ID"> Open my menu </a>
<button data-id="UNIQUE_MENU_ID"> Open my menu </button>

NOTE: If you are using more than one Overlay Menu on a single page, this value must be different among each of the stacks.

Replace Theme Menu

Enable this to remove a built-in theme menu to use Overlay Menu as your main menu.

NOTE: This feature may not work with all themes.

Extra Menu Toggle Stack (included)

Some users may want to have multiple toggles for a single Overlay Menu. Of course, each Overlay Menu has a default toggle already included, but we've also included a sub-stack called the Overlay Menu Extra Toggle, that will allow you to easily create more toggles.

The only setup required is to add your Overlay Menus Unique Menu ID to the Connected ID setting of the Extra Toggle stack. You'll see it at the very top of the settings panel, in the General Section.

Paste your Overlay Menus Unique ID here, and voila! You now have an extra toggle that will open your menu.

The settings for the Extra Menu Toggle sub-stack are extactly the same as the Menu Toggle settings for the Overlay Menu stack.

You can customize:

  • colors
  • backgrounds
  • borders
  • shadows
  • padding
  • sizes
  • icons
  • position
  • alignment