Action Menu

TUTORIAL




#1 Getting Started

  • Download & Install
  • Drag the ActionMenu Stack onto a stacks page
  • Configure your menu options
  • Add Items and links
  • Done

Download & Install

Purchase the stack here and install it into Rapid Weaver

Drag the ActionMenu Stack onto a stacks page

Open up the Library in Rapid Weaver and search for the ActionMenu Stack

Click and Drag the ActionMenu Stack onto a Stacks page

Configure your menu options

By default, ActionMenu will work automatically as soon as you drag it on to the page. The default settings have been carefully chosen to make your menu look as nice as possible, with no initial setup.

If you do want to make some adustments or changes, follow the Instructions Below to configure your menus settings.

Now all you have to do is click on the Add button, (the one with the + symbol) to add items to your menu

Peace of cake!

Thats it!

Getting started is literally as simple as clicking and dragging the stack onto the page, and then clicking the add button to create menu items.

#2 Action Menu Settings

  • General
    • Open on start
    • Show background overlay
    • Orientation
    • Distance
    • Animation Speed

Open on start

Marking this option will make your menu open by default when the page is loaded. If not checked, the menu will be closed initially.

Show Background Overlay

Checking this option will make an overlay background display when your menu is opened. By default this option is un-checked. But in some cases you might want a background overlay to make your menu pop out to the user.

After checking this option you will see that you can also set the Overlay Color and Overlay Opacity

Orientation

These options allow you to position your menu on the page. You can position it vertically on the top or bottom, or horiztonally on the left or right

The items and links will automatically adapt to the orientation you choose, no need for extra setup. ^_^ (Awesome sauce)

Distance

The distance options will determine how far from the edge of the page your menu will be place. You can set both a vertical and horizontal distance.

For example setting a vertical distance of 30px and a horizontal distance of 30px, will display your menu 30px from the top/bottom of the page and 30px from the left/right, depending on your orientation.

Animation Speed

The animation speed option is simply for making the menu items pop-up more quickly or slowly. The default setting is nearly perfect (^_-), but we've included the option just in case.

————————

  • Main Toggle
    • Hide Toggle Icon
    • Rotate Toggle Icon
    • Background
    • Icon
    • Size
    • Radius

Hide Toggle Icon

Checking this option will hide the icon in the toggle section. This is useful when wanting to use an image for the background.

Rotate Toggle Icon

By default the toggle icon will rotate when opened. This adds a nice effect. Although, in some cases (like when using image backgrounds ; ] ) you will not want this rotation to occur. If so, check this option.

Background

These settings will allow you to change the background of your menu toggle. There are four different options to choose from:

None, Solid Color, Gradient, Image

Icon

There are a few options for editing your menu toggles icon.

Icon Color Icon Font Icon Code (Which Icon you will use)

First, you can set the color of your Icon, next choose which icon font you want to use, and finally enter the icon code for the icon you desire.

NOTE: There are a couple of rules for entering icon codes~

Ionicons:

Ionicon Icon codes must be entered in this format ion-code-here, with dashes ( - ) separating multiple words.

e.g. ion-social-facebook or ion-social-snapchat

Google Material Icons:

Google Material Icon codes must be entered in this format code_here, with underscore ( _ ) separating multiple words.

e.g. account_circle or contact_email

Fontawesome:

Becuase Rapid Weaver includes Fontawesome Icons by default, we were able to add a drop down menu with a list of their icons. Easy huh!

Toggle Size

These options will allow you to adjust the size of your Menu Toggle and the Toggle Icon inside of it.

Toggle Radius

The slider allows you to adjust the corners of your Menu Toggle, you can set it to be completely circular, rounded, or completely square.

————————

  • All Items
    • Item size
    • Item Icon Size
    • Item Spacing
    • Item Radius

Item Size

This option will set the size for all of the Menu Items in your Action Menu. The items are all meant to be the same size for aesthetic reasons. Plus, it's easier to set up. : )

Item Icon Size

This option will set the size for all of the Icons in your Menu Items. These are also all the same size, to fit properly with the item size that you choose.

Item Spacing

Adjusting this value will change the amount of space between each menu item. You can increase or decrease the space accordingly.

Item Radius

This slider option will allow you to adjust the corner radius of all menu items. Similar to the menu toggle, you can make it completely circular, rounded, or completely square.

————————

  • All Links
    • Always Show Links
    • Link Text Color
    • Link Background

All options in this section will change every Item Link in your menu.

Checking this option will make it the Item Links display all the time. By default they are hidden and only display when hovering over a menu item.

Link Text Color

This value simply changes the color of the text inside the Item Link area.

Link Background

There are a few different styles to choose from when it comes to link backgrounds. You can choose either none, a Solid Color, or a Shadow.

None:

This will display no background behind the Item Link.

Solid Color:

This will display one solide color behind the Item Link.

Shadow:

This will display a drop-shadow behind the link, giving it a floating affect. (It's pretty sweet!)

#3 Individual Action Menu Item Settings

These are the options for each individual Menu Item that you add.

  • General
    • Hide Icon
    • Hide Box Shadow
    • Item Link
    • Item Background
    • Item Icon Color
    • Item Icon Font & Icon Code

Hide Icon

This option allows you to hide the icon inside of the Menu Item. Useful when you want to use a background image.

Hide Box Shadow

Checking this option will hide the box-shadow behind the Menu Item when being hovered. This is usefull when you want to use matching background colors for your Menu Item and your Item Links. It gives them a nice blend affect.

Here is where you will add the URL that you would like your Menu Item to link to. You can set it to anything using Rapid Weavers link interface, including pages from your own site, or external web pages. (^o^)/ Incredible!

Item background

These settings allow you to change the background for the individual Menu Item. You can choose between None, Solid Color, Gradient, or Background Image

Item Icon Color

This value simple changes the color of the Icon inside of the Menu Item

Item Icon Font & Icon Code

Here you can specificy the Icon Font (Google Material, Fontawesome, or Ionicons), and then enter the icon code for the specific icon that you would like to use.

NOTE: There are a couple of rules for entering icon codes~

Ionicons:

Ionicon Icon codes must be entered in this format ion-code-here, with dashes ( - ) separating multiple words.

e.g. ion-social-facebook or ion-social-snapchat

Google Material Icons:

Google Material Icon codes must be entered in this format code_here, with underscore ( _ ) separating multiple words.

e.g. account_circle or contact_email

Fontawesome:

Becuase Rapid Weaver includes Fontawesome Icons by default, we were able to add a drop down menu with a list of their icons. Easy huh!

Hoorah!

You made it! Now you are able to harness the true power of this incredibly simple, yet practical stack, the ACTION MENU