Tutorials

Overlay Menu

Description

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


Tutorial Overview

  • Getting Started
  • Basic Setup
  • Settings
    • General
    • Menu
    • Dropdown Icons
    • Top Level Menu Items
    • Sub Level Menu Items
    • Menu Toggle
    • Advanced
    • Experimental
  • Extra Menu Toggle Stack (included)

Getting Started

Let’s get started using the Overlay Menu.

Here you’ll learn how to get the menu up-and-running on your web-page.

Don’t worry, it’s suuuper easy! (Drag and drop)

( p.s. if you already now how to download and install, just skip to step 3 )

Step 1

Purchase the Overlay Menu Stack here (click me)

Step 2

After you recieve a download link, unzip the Overlay_Menu.zip file to reveal the contents of your purchase.

After unzipping the file, you will see a stack file called Overlay_Menu.stack, double-click on this file to install the stack into Rapidweaver.

Step 3

Now all you need to do is search for the stack in the Stack Library, e.g. “overlay menu” and then Drag and Drop it onto your page

That’s it!

We’ve included great presets that allow your menu to work right away, as soon as you place it on the page.


Settings

Here we’ll go over all of the settings included with the Overlay Menu.

General Settings

  • Options
    • Unique Menu ID
    • Use Custom List

Unique Menu ID ( INPUT )

The Unique Menu ID will provide your menu with a specific ID that will help distinguish if from other Overlay Menu’s on the page.

It can also be used to connect your Overlay Menu to extra menu toggles using the included Overlay Menu Extra Toggle stack.

NOTE: If you only plan on using one Overlay Menu on your page, you don’t need to do anything with this value. By default the Overlay Menu is connected to it’s original toggle, and it’s ID is already set.

Use Custom List ( CHECKBOX )

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 menu, and instead want to create your own custom dropdown menu, with your own links.

If you check this option, you will see a dropdown list that will allow you to choose between:

  • Markdown or HTML

We’ve provided the option create your custom menu in either of these formats. Markdown is quick and easy, while HTML can be used to create more advanced menus.

Don’t know anything about HTML or Markdown???

Not to worry, If you check the option, you will see that we’ve also provided a default menu example in the input field. Just copy the format and you’ll be good to go! ^^


  • Options
    • Font Family
    • Menu Fill Mode
    • Overlay Opacity
    • Background

Font family ( SELECT MENU )

Simply allows you to choose a font for your menu from a list of included presets. We’ve chosen some of the top fonts on the web.

This option allows you to choose the maximum width of your menu.

You can choose to have it Fill the page, or you can use Pixel / Percentage based widths.

Your menu will automatically default to fill the page on mobile devices and tablets, no matter what fill option you choose.

Overlay Opacity ( SLIDER )

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.

By Default, it is set to 0.8 (slightly transparent)

Background ( SELECT MENU )

This is where you can set the background of your menu. You can choose between

  • None
  • Solid Color
  • Gradient
  • Image

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.


  • Options
    • Open Icon Font
    • Open Icon (Code)
    • Close Icon Font
    • Close Icon (Code)
    • Rotate when opened (Checkbox)
      • Rotation degrees

Open & Close Icons

You can choose an icon for your dropdown Open state, and Close state.

Open is the default state, You should choose icons that tell the user to click on the link to open a dropdown.

Close is the icon that will show when a dropdown link is clicked. This icon should tell the user that he/she can close the menu.

You can select which icon font you would like to use for each icon. We’ve included icons from Google Material Icons, Fontawesome, and Iconicons.

You also need to type in the proper Icon code for the icont you want to use.

NOTE: Due to the way each icon font works, there is a different icon code format depending on which font you use.

Google Material Icon Format: account_circle (lowercase, use underscores _ to separate words)

See all Material Icons here: Offical Material Icon site

Fontawesome Icon Format: arrow-circle-down (lowercase, use dashes – to separate words)

No need to add “fa fa-”, just type in the specific icon code. We handle the rest.

See all Fontawesome Icons here: Offical Fontawesome site

Ionicon Icon Format: ion-arrow-down-b (lowercase, use dashes – to separate words)

With Ionicons, you must include the “ion-” before the code. Their site is set up this way, so you can easily copy and paste the codes directly.

See all Ionic Icons here: Offical Ionicon site

Rotate

You can use the rotation option to make your icon rotate once a dropdown list is opened.

This is handy for rotating plus symbols ( + ) into ( x ) symbols, or rotating down-arrows into up-arrows.

To achieve such an affect, set both the open AND close icons to the same value, e.g. a plus ( + ) or a down-arrow, and then set the rotate to something like 45 or 180(degrees).

( + ) to ( x ) = 45deg

( keyboard_arrow_down ) to ( keyboard_arrow_up ) = 180deg


Top Level Menu Item Settings

  • Options
    • Font size
    • Padding
    • Vertical Spacing
    • Ra dius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These 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!

One thing to note is the Vertical Spacing.

This input will determine the amount of vertical space between all menu items in the list.


Sub Level Menu Item Settings

  • Options
    • Font size
    • Use Top Level Color Styles (Checkbox)
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background

These options are nearly the same as the top level items, with the exception of padding, vertical spacing, and radius. These styles are shared with the top level menu items.

Note: By default sub level menu items with share there color values (text color, background, etc.) with top level menu items

If you want to use custom color styles for sub level items, uncheck the Use Top Level Color Styles checkbox.


  • Options
    • Show Toggle Text (Checkbox)
    • Show Toggle Icon (Checkbox)
    • Text Font
    • Text (input)
    • Text Font Size
    • Icon Font
    • Icon Code (input)
    • Icon Size
    • Fill Mode
    • Position
    • Vertical Align (Fixed Menus only)
    • Horizontal Align
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Hover Text (Color)
    • Hover Background
    • Border
    • shadow

For the most part, the Menu Toggle Settings are straightforward and easy to use. Play around with them and checkout the preview in settings to see the changes directly.

There are a just few options that are important to understand:

Show Toggle Text ( CHECKBOX )

Unchecking this option will hide the text of the toggle button, leaving only the icon

Show Toggle ICON ( CHECKBOX )

Unchecking this option will hide the icon of the toggle button, leaving only the text

Position ( SELECT MENU )

There are two positioning options to choose from with the Overlay Menu Toggle

Inline or Fixed

Fixed:

By default, the toggle is fixed, meaning it scrolls with the page.

When this option is selected, you can choose the Vertical (top, bottom) and Horizontal (left, right, center) alignment.

Use the margin settings to adjust the spacing of your toggle when fixed.

Inline:

If you select the inline option, your menu will stay inline with the content. You can still set the Horizontal alignment (left, right, center) to make your toggle fit just right.


Advanced Settings

  • Options
    • Show Data ID Info

As a really cool bonus feature, you can use ANY clickable html element to open up your Overlay Menu, using a special data-id attribute.

The data-id attribute using your menus Unique Menu ID and is formatted like so:

data-id="overlay_menu_UNIQUE_MENU_ID"

Just replace the UNIQUE_MENU_ID portion with your Overlay Menu’s Unique ID value.

Then, just add the data attribute to a clickable HTML element, such as a link, button, etc.

here are some examples

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

<button data-id="overlay_menu_UNIQUE_MENU_ID"> Open my menu </button>

If you check “Show data ID info” option, a snippet of your exact data-id code (including your unique ID) will show at the top of the stack in edit mode. This makes it really easy for copying and pasting the code for use.

You’re welcome. ^_-


Experimental Settings

  • Options
    • Replace Theme Menu

Due to popular request, we’ve developed an experimental feature that is meant to hide your themes default menu, to use the Overlay Menu instead!

Simply check the “Replace Theme Menu” option, and the magic will take place.

NOTE: This feature is experimental, and 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

Hoooraah!

You’ve made it to the end of the tutorial. You’re a beast!

Not to mention you can now create amazing menus for your website~~ ^_-

Go crazy and make something awesome. Feel free to share your menus on our Facebook page

Need to update your product? Use the Order Lookup Form to download the latest version.