menu

Overlay Menu Tutorial

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)
  • New Features! *(Learn how to use them here)



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



New Features

  • Make custom lists with new stacks controls
  • List Icons & Subtitles
  • Hide menu at different screen sizes
  • Menu Text Alignment
  • Make parent items clickable
  • Additional new features
    • Close menu with ESC key
    • Dropdown Icon Sizing

Making Custom Lists With Stacks Controls

previously it was possible to create custom menus with Markdown & HTML, but now it is also possible to create custom menus using the stacks interface!

We've created a simple interface that can be used to make custom menus by simply clicking a button to add items, and changing a few settings to customize each link, and link level. You can even easily add List icons & Subtitles ^_^

Here, I'll show you how to make make custom lists using the new feature:

# 1 Check the "Custom List" option and then select "Stacks"

After doing select stacks, you will see that a new stacks list item has appeared underneath the menu preview, follow by a [ + List Item ] button for adding additional items to your list.

# 2 Customizing List Items

If you click on a stacks list item, you will see that there are some settings in the inspector panel. You can use these settings to Set the link, Set the item level, add list icons, and add subtitles. The settings for each added list item are:

  • Item Link
  • Item Level
  • Item Subtitle
  • Item Icon

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.

Item Level

You will use these settings to create dropdown menus of multiple levels. The options are:

  • Top Level
  • Sub Level 1
  • Sub Level 2
  • Sub Level 3
  • Sub Level 4
  • Sub Level 5

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 change the level to Sub Level 1, like so:

Doing so will create a dropdown menu with the Sub Level 1 item underneath the preceeding 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, like so:

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.

Item Subtitles

Here you will simply find a checkbox that reads "Add subtitle", if you check it, a new text-input will appear in the Stack List Item, where you can input some subtitle text.

Item Icon

Here you will find a checkbox that reads "Add Icon", if you check it, more controls will appear allowing you to choose an icon font, and input the icon code. The rules for creating icon codes are the same for creating menu toggle icons and dropdown icons.

Not only will you see new controls appear, but you will also see the icon show up next to the main text in the Stack List Item.



List Icons & Subtitles

The Overlay Menu now supports creating List Icons & Subtitles!

This feature is only possible when creating custom lists, not when using RapidWeavers built in Menu.

The method for creating list items and subtitles will depend on which type of custom list you've selected. Remember there are 3 types of custom lists

  • Stacks *(new)
  • Markdown
  • HTML

#1 Using Stacks

The easiest way to create list items with Icons and Subtitles is to use the new Stacks custom list feature.

If you are using the new Stacks custom list option, then you can simple follow the instructions in the section above

It is as simple as using the settings inspector panel. You can check a box to add a subtitle, or add an icon to each list item. You'll see more options for customizing there.


#2 Using Markdown or HTML

If you are using markdown or HTML to create a custom list, you will need to use some code snippets for adding Icons and Subtitles. The snippets for both are exactly the same.

Subtitle Snippets

The snippet for creating a subtitle for Markdown or HTML is a simple small tag with your subtitle text inside. like so:

<small> MY SUBTITLE TEXT HERE </small>


Icon Snippet

If you are using Markdown or HTML to create a custom list, you can use an Icon tag to add list icons.

Overlay Menu supports three different icon fonts, and the icon snippet for each font is different:

Google Material Icons

<i class="material-icons">ICON_CODE_HERE</i>

Font Awesome Icons

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

Ionic Icons

<i class="ion-ICON_CODE_HERE"></i>

Simply choose the font of the icon that you want to use, replace the ICON_CODE_HERE text with the code for your icon.


#3 Adding snippets to your Markdown/HTML list items

Markdown

The default format for a Markdown Link is:

- (Item Text)[http://item_link_here.com]
Subtitles

To add a subtitle to your markdown list item, place the snippet right after the Item Text in the Markdown List Item Snippet, like so:

- (Item Text <small> MY SUBTITLE TEXT HERE </small> )[http://item_link_here.com]
Icons

The icon snippet can be added before the Item Text in the Markdown List Item Snippet, like so:

- ( <i class="material-icons">ICON_CODE_HERE</i> Item Text )[http://item_link_here.com]

A full Markdown List Item Snippet with an icon and subtitle would look like this:

- ( <i class="material-icons">ICON_CODE_HERE</i> Item Text <small>MY SUBTITLE TEXT HERE</small> )[http://item_link_here.com]

Of course, replace the icon tag with the proper code snippet for the icon font you want to use.


HTML

The default format for an HTML Link is:

<li> <a href="http://item_link_here.com"> Item Text </a> </li>

Subtitles

To add a subtitle to your markdown list item, place the snippet right before the Item Text inside of the A tag, like so:

<li>
    <a href="http://item_link_here.com">
        <small> MY SUBTITLE TEXT HERE </small>
        Item Text
    </a>
</li>
Icons

The icon snippet can be added after the Item Text, before the closing A tag, like so:

<li>
    <a href="http://item_link_here.com">
        Item Text
        <i class="material-icons">ICON_CODE_HERE</i>
    </a>
</li>

A full HTML List Item Snippet with an icon and subtitle would look like this:

<li>
    <a href="http://item_link_here.com">
        <small> MY SUBTITLE TEXT HERE </small>
        Item Text
        <i class="material-icons">ICON_CODE_HERE</i>
    </a>
</li>

Of course, replace the icon tag with the proper code snippet for the icon font you want to use.



Hide Menu At Different Screen sizes

You will now find a Responsive section in the settings panel, where you will have the option to hide the Overlay Menu at different screen sizes. Just like typical RapidWeaver stacks, you can choose to hide the stack on:

  • Mobile
  • Tablet
  • Desktop

You can select multiple options at the same time, so choose freely when you want the menu to display.



You will now find a new option in the Menu Section of the settings area that will allow you to set the text alignment of your menu. You can choose between

  • Left
  • Right
  • Center



Make Parent Items Clickable

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 use the Make Parent Items Clickable option, under the Advanced Section

Simply check the option, and you will see that parent items will now link to pages, and the dropdown menu can be opened by clicking the icon button on the right.



Addtional New Features

  • Close menu with ESC key
  • Dropdown Icon Size

Close with ESC key

In addition to pressing the close ( x ) button, Overlay Menus can now be close by pressing the ESC key. This makes it more convenient for users who don't like to use their mouse.

Previously, Dropdown icons inherited the size of list items. If your list items were 32px large, then the dropdown icon would be the same.

Now, Drodpown icon sizes can be set specifically to whatever size you choose. Simply set the Size in the Dropdown Icons section.



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