Tutorials stack icon

Quick Menu

An extremely versatile, minimal, sticky navigation menu stack for RapidWeaver by Weavium

Table of Contents

  • How to use
  • Show / Hide
  • Responsive Hide
  • General
  • Items
  • Items > Openend
  • Close Button
  • Hiding Quick Menu Items
  • Quick Menu Item Actions
  • Quick Menu Item Icons
  • Quick Menu Item Custom Colors


Introduction

Here you can learn how to use the Quick Menu stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Once you drag the Quick Menu stack onto the page, you will see that (by default) it has one Quick Menu Item stack inside of it. You can add more items to your menu by pressing the ( + ) button.

The Quick Menu stack contains all of the options for setting up orientation, display, responsive hide, general sizing and styling options, and more. This is where the majority of customization will take place.

If you click on an individual Quick Menu Item stack, you will see options for setting custom actions, icons, and the ability to set Custom Colors.

Text for menu items can be edited directly through the stacks interface by double clicking on the "Item Text" input for each item.

Now all you have to do is add items, customize their icons & text, and you'll be good to go!

Oh, and you'll have to select the proper action you want for your item, the default action is link, which can be set through RW, but you can choose other actions if wanted.

Go and create!!


Show / Hide

Display

This dropdown menu will allow you to select how and when your menu will be displayed, you can select between:

  • Always
  • On Scroll To
  • Between Markers

Always

When set to always, the menu will always be displayed, keep in mind that Quick Menu is fixed to the page and scrolls along with the user.

On Scroll To

The on scroll to option will display the menu when the user scrolls to the point where you have placed the menu in your stack interface. The menu will then continue to be displayed until the end of the page. This is a simple display on scroll option.

Between Markers

The between markers option allows you to set a specific start point, and end point for the Quick Menu to be displayed.

Once this option is selected, you will see inputs appear, one for the Starting Marker, and one for the Ending Marker

In order to get this working, you will need to drag 2 Quick Menu Marker stacks onto the page, and give each one of them a custom ID

Simply search for Quick Menu Marker in the Stacks Library of Rapidweaver, you will see the Quick Menu Marker Stack. After dragging a marker onto the page, you will see a single input in the settings panel, that allows you to set a Marker ID for the marker.

This ID can be used to refer to the marker in the Quick Menu Item Stack.

Once you've included your markers, set their ID's, and then entered the ID's into the starting marker, and ending marker inputs, your Quick Menu will then appear inbetween these two points on your page!! Super Slick eh??



Responsive Hide

Mobile, Tablet, Desktop

These buttons simply allow you to set the menu to be hidden on the corresponding device size that you choose. You can select more than one at a time.



General

Horizontal Position

The horizontal position dropdown allows you to choose whether your menu will be on the left or right of the page.

Vertical Position

The vertical position dropdown allows you to place your menu on the top, center, or bottom of the page.

If you select top or bottom, then you will also see an additional input for setting the offset amount from the orientation that you choose.

Padding

The general padding option is the amount of padding that will be around the Quick Menu when it is opened. Unless opened, you will not see this padding visually.

Z-index

The z-index option allows you to set the Quick Menu on top of other fixed element ons the page. Adjust this if you find your menu being hidden by another fixed stack.

Don't worry about setting individual z-indexes for multiple Quick Menus, as we take care of this for you! It is handled automatically. _-

Background

The background in the General section is the background that you will see behind the menu items when the menu is opened.

You can set a color, and the opacity through RapidWeaver.

Hide View All Button

In some cases you will not have any hidden items, and therefore you will not need the View All Button. In these cases, you can check this option, and it will hide the View All toggle from your Quick Menu.



Items

Note that all of these styles refer to the menu in it's closed state!

Default BG (Color Picker)

The Default BG option will determine the background color of all Quick Menu Items that do not have custom colors set on them.

Default Color (Color Picker)

The Default Color option will determine the text color of all Quick Menu Items that do not have custom colors set on them.

Item Size (Input)

The Item Size option determines the height and width of all Quick Menu Items

Item Radius (Input)

The Item Radius determines the rounded corners of the menu when closed, and the menu text that pops out when hovered.

Icon Size (Input)

The Icon Size option determines the size of all Icons in the Quick Menu.

Text Size (Input)

The Text Size option determines the font size of all Text in the Quick Menu when hovered.

Text Weight (Input)

The Text Weight option determines the thickness of all Text in the Quick Menu when hovered.

Text Font (Dropdown)

The Text Font dropdown allows you to select a font family from a list for the Quick Menu.



Items > Opened

Note that all of these styles refer to the menu in it's opened state!

Max Width (Input)

This option allows you to set the maximum width for all Quick Menu Items when the menu is opened.

Padding (Input X 2)

These padding inputs allow you to set the Vertical, and Horizontal padding of all Quick Menu Items in the opened state.

Item Radius (Input)

This input allows you to set the corner roundness of all Quick Menu Items in the opened state.

Icon Size (Input)

This input allows you to set the size of all Icons in the opened state.

Text Size (Input)

This input allows you to set the size of all Text in the opened state.



Close Button

Here you will find basic styling options for the close button such as:

  • Size (The size of the outer shape of the button)
  • Icon Size (The size X icon inside of the button)
  • Radius (The roundness of the button)
  • Icon Color (The color of the X icon)
  • Background (The color of button)


Hiding Quick Menu Items

Quick Menu Items can easily be hidden by clicking on the individual item that you want to hide, and then checking the "Hide (shows only when opened)" check box.

As it states, when an item is hidden, it will only be shown when the "View All" button is clicked and the menu has been opened.



Quick Menu Item Actions

There are 5 preset actions that can be used for an individual item:

  • Link
  • Scroll to Top
  • Scroll to Bottom
  • Scroll to Marker
  • Javascript Function

LINK

When link is selected, you will see an input appear for setting the link of your item.

Scroll To Top

When scroll to top is selected, the button will automatically scroll to the top of the page when clicked.

Scroll To Bottom

When scroll to bottom is selected, the button will automatically scroll to the bottom of the page when clicked.

Scroll To Marker

When scroll to marker is selected, the button will scroll to a Quick Menu Marker stack that you include into your page.

Once this option is selected, you will see an input appear for the marker ID. In order for this to work, you must drag a Quick Menu Marker stack onto the page, and give it an ID. After doing so, drag the marker to a point on the page that you want the Quick Menu Item to automatically scroll to when clicked.

After you've included the Quick Menu Marker stack onto your page, then provide the ID to the input in the Quick Menu Item stack, so that it nows which marker to scroll to.

Javascript Function

When the Javascript Function option is selected, an input will appear where you can place a function like so:

alert("Hello")

or

myCustomFunction(Argument1, Argument2)



Quick Menu Item Icons

Icons can be set simply by selecting the icon font to use, and then providing the code for the icon.

Each Icon font has a specific format, like so:

FontAwesome: fa-info-circle (dashes)

Ionicons: ion-gear-a (dashes)

Material Icons: arrow_upward (underscores)



Quick Menu Item Custom Colors

In order to set individual colors for a Quick Menu Item that will override the shared styles of the menu, all you have to do is Check the custom colors toggle, and then two inputs will appear for setting the background color and the text color



You did it!!!!!

Quick Menu Changelog

Version 1.0.0

  • Ability to set menu both vertical and horizontal menu orientation
  • Ability to set custom display for menu (Always, On Scroll, Between scroll markers)
  • Ability to hide individual items from the menu that will only show when opened
  • Ability to choose from preset actions for items such as (Scroll to Top, Scroll to Bottom, Scroll to Marker, and Javascript Function)
  • Custom sizing, radius, colors, backgrounds, icons, fonts, and more.
  • Set individual colors for icons or used shared colors
  • Responsive hide for menu on Mobile, Tablet, or Desktop devices
  • Stunning edit interface that provides a visual idea of what the menu will look like when opened and closed