blog-tutorial-post-template

Tutorials

Getting Started

Using The Built-in Menu

Setup is a breeze if you want to use the built in RapidWeaver project menu. Just drag and drop the stack into the Stacks editor. Then refer to the Settings section to learn how to customize the appearance.

Creating A Custom Menu

Enable “Use Custom List” in the stack’s General Settings.

Adding List Items

You will see that a new stacks list item has appeared in the Stacks editor, followed by a [ + List Item ] button for adding additional items to your list.

Editing List Items

Click on a list item to edit it’s settings.

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.

Link Title

Use this setting to define what text displays in the menu item.

Link

Define where the link navigates to.

Level

Select what level the menu item will appear on. Use this setting to create dropdown menus of multiple levels. 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 changing the level to Sub Level 1, like so:

Doing so will create a dropdown menu with the Sub Level 1 item underneath the preceding 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. 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.

Add Subtitle

Enable this to define a subtitle.

Add List Icon

Enable this to define an icon to display next to the title. Ionicons and Font Awesome icons are built-in to the stack.

To use an icon add the appropriate class names defined just like in the examples below.

Ionicon Example:

icon ion-ios-home

Font-Awesome Example:

fa fa-home

See full list of usable Font Awesome icons
See full list of usable Ionicons icons

Completion

Continue adding list items and editing the settings to complete your custom menu.


Settings

General Settings

Toggle Position

Select where in the window you want to place the toggle. “Fixed” options will scroll with the page. “Inline” options will not scroll but instead display wherever you have placed the stack.

Menu Align (New in version 2.0.0)

Select the horizontal position of the menu.

NOTE: When using the “Left” and “Right” options the footer content will display in the center as opposed to below the menu.

Text Alignment

Select the horizontal alignment of the menu text.

Font

By default, the menu will inherit whatever font is being used by the RapidWeaver project. Select “Custom / Webfont Helper” to use a custom font. In the input fields you can declare a font name (case sensitive) of a font you have loaded or the name of a Google Font you have added with the included Webfont Helper stack.

Width

Define how wide you want the menu to be.

Footer Width

Define how wide you want the footer content to be.

Use Custom List

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


Overlay

Overlay Background

This is where you can set the background of the screen when the menu is active. 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.

Overlay Opacity

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.


Toggle

Select what to display inside the toggle. by default the built-in menu icon will display. You have the option to add custom text, a custom icon, or remove the toggle contents all together.

When selecting a “Custom Icon” option a “drop stacks here” section will display in the Stacks editor. Here you can drag and drop a custom image or add an HTML stack to declare an Ionicon or Font Awesome icon.
See full list of usable Font Awesome icons
See full list of usable Ionicons icons

Ionicon Example:

<i class="icon ion-ios-menu"/></i>

Font-Awesome Example:

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

Match Menu Width

Enable this to make the toggle stretch to match the width defined for the menu in the General Settings.

More Settings

The remaining 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.


Background

This is where you can set the background of the menu items. The Options are fairly standard and easy to setup. If a background color is enabled options to adjust the item padding and corner radius will appear.

Customize Submenu Items

By default, submenu items will match the appearance of the top level items. Enable this to set different background and text colors for the submenu items.

Make Parent Items Navigable

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 enable this setting to have parent items link to pages. The dropdown menu can still be opened by clicking the dropdown icon on the right.

Animate Dropdown Arrows

Enabled by default, this will animate the rotation of the dropdown icons when a parent item has been clicked.


Advanced

Unique Menu ID

Define custom ID that you can add to links to enable them to open up your Overlay Menu. This value is case sensitive and should not include any spaces or special characters other than dashes (-) and underscores (_).

When creating a link, add a “data-id” attribute just like in the image below. Replace the UNIQUE_MENU_ID portion with your Overlay Menu’s Unique ID value.

HTML examples:

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

NOTE: If you are using more than one Overlay Menu on a single page, this value must be different among each of the stacks.

Replace Theme Menu

Enable this to remove a built-in theme menu to use Overlay Menu as your main menu.

NOTE: This feature may not work with all themes.


Extra Menu Toggle Stack

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

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

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