blog-tutorial-post-template

Tutorials

Action Menu

#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

Quick Links

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

  • Posted On

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software