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

Live Search 2

  • Posted On

Live Search 2 has been updated with new features, improvements, and important bug fixes – all designed to make your site’s search experience even faster and more precise.

This update is free and automatic for all existing customers.

Don’t own it yet? Now’s the perfect time to jump in — Live Search 2 is 30% off for a limited time! No code needed — your discount is automatically applied at checkout.

New Features:

  • Added support for exact match searches using quotation marks around parts of a search phrase.
  • New option to show a “Clear Input” button.
  • Added Replace Character feature.
  • Now supports two separately defined search bars on the same page.
  • New option to adjust z-index.

Improvements:

  • Index file generation now detects and ignores duplicate content, such as text found in every page header and footer.
  • If any pages are missing from the index file, they will now still be searched dynamically.
  • Index file data is now compressed to reduce file size.
  • Pages at https://website/folder/index.(php|html) and https://website/folder/ are now treated as duplicates and will not be indexed separately.
  • Search results container height now only stays fixed during pagination — it will shrink dynamically for new searches.
  • When searching custom sitemaps, the default sitemap will now be ignored.
  • The popout search results container will now automatically hide when the search input is empty.

Bug Fixes:

  • Fixed an issue that prevented custom text/language settings from applying correctly.
  • Fixed a bug where result descriptions could fail to display a local section title.
  • Fixed a bug that could trigger an error if suggestions were enabled but the stack was not published to the page.
  • Prevents form submission before the page is fully loaded, avoiding unwanted page refreshes on slow-loading pages. A loading indicator is shown until the page is ready.

Check it out in action!

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

RapidWeaver is a trademark of Realmac Software