Table of Contents
- How to use
- Show / Hide
- Responsive Hide
- Items > Openend
- Close Button
- Hiding Quick Menu Items
- Quick Menu Item Actions
- Quick Menu Item Icons
- Quick Menu Item Custom Colors
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
This dropdown menu will allow you to select how and when your menu will be displayed, you can select between:
- On Scroll To
- Between Markers
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.
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??
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.
The horizontal position dropdown allows you to choose whether your menu will be on the left or right of the page.
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.
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.
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. _-
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.
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.
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:
- Scroll to Top
- Scroll to Bottom
- Scroll to Marker
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.
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
- 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
- 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