blog-tutorial-post-template

Tutorials

Side Menu

Side Menu Tutorial

Description

A beautifully customizable dropdown menu that slides out from either side of the page, triggered by a menu toggle. Use Rapidweaver’s built in menu, or create your own custom menus using Stacks, Markdown, or HTML. Get creative 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
  • Creating Menus With Stacks Controls
  • Adding List Icons & Subtitles
  • Extra Menu Toggle Stack (included)

Getting Started

Let’s get started using the Side 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 Side Menu Stack here (click me)

Step 2

After you recieve a download link, unzip the side_menu.zip file to reveal the contents of your purchase.

After unzipping the file, you will see a stack file called side_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. “Side 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 Side 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 Side Menu’s on the page.

It can also be used to connect your Side Menu to extra menu toggles using the included Side Menu Extra Toggle stack.

NOTE: If you only plan on using one Side Menu on your page, you don’t need to do anything with this value. By default the Side Menu is connected to it’s original toggle, and it’s ID is already set.

Use Custom List ( CHECKBOX )

By default the Side Menu stack will use your Rapidweaver site menu.

The Custom List 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:

  • Stacks, Markdown or HTML

We’ve provided the option create your custom menu in either of these formats. Using our stacks controls is the quickest and easiest way to create great looking menus. Markdown is also quick and easy, finally there is HTML, which 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
    • Text Alignment
    • Fill Mode
    • Padding
    • Background Opacity
    • Background
    • Header Section
    • Footer Section

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.

Text Alignment ( SELECT MENU )

With the Side Menu, you can choose to align the menu item text to the left, right, or center. To be honest, left aligned menus are the most readable for users and we recommend sticking to this convection. That being said, we’ve provided different text alignment options for your convenience.

Fill Mode ( SELECT MENU )

This option allows you to choose the maximum width of your menu.

You can choose to use a Pixel value or a Percentage based value.

In addition, you will find that you can set three different widths for your menu, one for Mobile, one for Tablets and one for Desktops. This allows you to make sure that you menu fits just right on all devices. Both PIxel and Percentage widths provide these three widths.

Padding ( SELECT MENU )

Here you can set the padding of your Side Menu. You can set the top, bottom, left, and *right padding.

Set the left and right padding to 0 when you want the inner menu items to be flush with the edge.

Background Opacity ( SLIDER )

Here you can set the opacity of your Side 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.

Header & Footer Sections ( CHECKBOX )

At the end of the Menu settings, you will see two checkboxes labeled Header section and Footer Section. Checking either of these options will create a section in RapidWeaver that allows you to add extra content to the menu. The header section will be placed above the menu, below the close icon. The footer section will be placed right below the menu.

  • Options
    • Icon Size
    • Open Icon Font
    • Open Icon (Code)
    • Close Icon Font
    • Close Icon (Code)
    • Rotate when opened (Checkbox)
      • Rotation degrees

Icon Size

This is a simple input field that will allow you to set the size of your dropdown icons. Both the open and close icon sizes will be equal whatever value you set.

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
Side Menu uses Font-Awesome version 4.7.0

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
Side Menu uses Iconicons version 2

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
    • Subtitle Size
    • Padding
    • Vertical Spacing
    • Radius
    • Text (Color)
    • Subtitle (Color)
    • Background
    • Hover Text (Color)
    • Hover Subtitle (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
    • Subtitle Size
    • Indent with (Sub level indentation – see below)
    • 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.

Indentation (SELECT MENU)

This option allows you to choose how sub level items will be indented.

Sub level items need to be indented for a user to know that they are below a top level item. There are two types of indentation, Margin, and Padding.

By default, Side Menu sub level items are indented with Margin. This means that Sub Level Items, will have a smaller width that top level items, and they will be pushed inwards.

Choosing the Padding option makes it so that all items (Both top level and sub level) are the same with, but Sub Level items will be pushed inwards with padding. This great for creating menus that are flush to the edge because the shared width makes the menu look clean, but the padded indentation of the sub level items still allows the user to distinguish sub level items.

It might sound a bit complex, but not to worry, try changing the option and see what happens. It’s really easy to understand once you see it in action.

  • 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 Side 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.

Close Button

  • Options
    • Use Custom Close Button
    • Size
    • Icon Font
    • Icon Code (input)
    • Margin
    • Padding
    • Radius
    • Text (Color)
    • Background
    • Border

With the Side Menu, we’ve provide the ability to use a custom close button! By default, the close button will be a simple X, the most common close icon on the web. If you want to create your own close button, using an arrow arrow_back or something else, you can use the Use custom close icon option. See more below.

Use Custom Close Button (CHECKBOX)

If you check this option, the default Close Icon will be replaced with a new one that you can fully customize. underneath this checkbox you will see a variety of styling options for the close icon including icon options, color options, backgrounds, radius, sizing, margin, padding, and more.

The icon for the close icon follows the same standards as the icons all throughout the Side Menu. Be sure to use the proper icon code for the icon font that you choose. Other than that cutsomizng the close icon is really easy.

Responsive

You will find a Responsive section in the settings panel, where you will have the option to hide the Side 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.

Advanced Settings

  • Options
    • Show Data ID Info
    • Make Parent Items Clickable

Show Data ID info

As a really cool bonus feature, you can use ANY clickable html element to open up your Side Menu, using a special data-id attribute.

The data-id attribute using your menus Unique Menu ID and is formatted like so:

data-id="side_menu_UNIQUE_MENU_ID"

Just replace the UNIQUE_MENU_ID portion with your Side 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="side_menu_UNIQUE_MENU_ID"> Open my menu </a>

<button data-id="side_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. ^_-

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.

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 Side 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.

Making Custom Lists With Stacks Controls

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 changing 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.

Adding List Icons & Subtitles

The Side Menu 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 simply 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.

Side 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.

Extra Menu Toggle Stack (included)

Some users may want to have multiple toggles for a single Side Menu. Of course, each Side Menu has a default toggle already included, but we’ve also included a sub-stack called the Side Menu Extra Toggle, that will allow you to easily create more toggles.

The only setup required is to add your Side 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 Side 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 Side Menu stack.

You can customize:

  • colors
  • backgrounds
  • borders
  • shadows
  • padding
  • sizes
  • icons
  • position
  • alignment

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

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