Quick Menu is one of those stacks that makes you wonder why no one came up with this solution before now. A menu stack that appears, or disappears when and where needed and can trigger whatever you want it to trigger.
Here's an example: I have a single page website and would like a context menu to appear for each section. With Quick Menu I can add a menu of my choice to either side of the page with markers before and after each section and with each section a new menu will fade into view.
A product section, for instance, with a couple of rows of images could display a menu to call up product information for each item.
And when you scroll to the next section, the menu fades out, ready for the next products…
A group of social buttons when a contact form is visible on the page, or that contains a trigger for the contact form's lightbox alongside the social buttons.
Quick Menu can also be set to be permanently in view, or to appear when a marker on the page is scrolled to and then remain visible until the bottom of the page is reached. Quick Menu can also contain hidden menu buttons.
In this case, there is a 'View All' button which triggers a Quick Menu lightbox that displays a complete list of menu items.
Quick Menu is highly configurable, so that each button can have its own colour and it goes without saying that each button can have its own icon.
Quick Menu consists of three stacks – the main stack that supplies the menu's global settings, a Menu Item stack that allows configuration of each separate item and a Marker stack.
The first thing that struck me about the settings panel, is that there are no unnecessary settings included – so no background colour, no margins, or padding. The second thing that I observed is that Weavium, like a number of other developers that produce great stacks, don't make use of tool tips; so you'll either need to experiment, or read the manual.
Show/Hide – Display – Always, On Scroll To, Between Markers
Responsive – Hide Menu (for the standard breakpoints)
Horizontal Position – Left, Right
Vertical Position – Top, Centre, Bottom
Top Offset – px
Padding – Top Offset for the lightbox menu
Z-Index – Default setting 1 quadrillion
Background – Lightbox background colour
Hide View All Button – deactivates the lightbox
Default BG (colour)
Default Content (colour)
Item Radius (interesting to note that whilst the menu radius is altered top and bottom, the lightbox radius only top right)
Text Weight – Normal, Bold
Font – Selection of 15 web fonts
Items > Open
Max Width – px
Item Padding – Vertical, Horizontal
Item Radius – sets the radius of all four item corners
Quick Menu Item Stack
Hide (shows when opened)
Item Action – Link (default), Scroll to Top, Scroll to Bottom, Scroll to Marker, Java Function
Icon Font – Font Awesome, Ionic, Material, Custom
Quick Menu Marker Stack
Quick Menu is an interesting new stack that is well worth a look at. Check out the demo page to see its possibilities.
Foundation, Foundry and Bootleg users already have a wide choice of menus for their pages, while users of other themes are left out in the cold. With the exception of MyMenu and a few button stacks, there are not a lot of choices available. Overlay Menu to the rescue.
I'll freely admit that when I dragged 1LD's Overlay Menu onto my page and took a look at the settings panel, I was a little overwhelmed. Let's take a look and see why:
The General settings panel begins by requesting a unique id. Well o.k. that suggests that I can place more than one instance of Overlay Menu on my page, but why would I want two menus? That's instantly explained but the next option Use Custom List. If this option is left unchecked, OM defaults to the standard RapidWeaver Menu. When checked, the stack instantly changes to display a list of links. The link list is formatted with Markdown by default and contains both Top Level and Sub Level entries. If you prefer HTML formatting, you just need to set it in the next dropdown menu.
Cool, so OM is multifunctional and I can open any link with it – on my page, or elsewhere.
The Menu panel continues with a choice of twelve options for the Font Family. The fonts are all Google fonts, so I'm wondering why there isn't an option to set my own font. However, the fonts are all some of the most popular of the Google fonts, so chances are that your font is amongst them.
The Menu Fill width determines the maximum width for the link list. By default it is set to 960px so, theoretically its max width will be the same width your site. You may also set a max width in %, or to Fill. The max width is always centred on the page, with the link list aligned left.
Next we have the Overlay Opacity with settings between 0 and 1. The default is 0.8.
Now I just wrote that Overlay Menu is a full page overlay. That's not strictly 100% true. The Background may be set to None, Colour, Gradient or Image, so deactivating the background leaves you with just the link list when the menu button is activated. However, you can't click through the transparent overlay, so make sure that your Close button is prominent. This will take some serious planning, as the Close toggle is always the same colour as the link text.
The next settings are for the Dropdown Icons – the icons that appear next to the submenus. You may choose from Google Material Icons, Fontawesome icons, or Ion icons and you'll find options for both the open and the close icon. There is also an option to Rotate Icon when opened.
Top Level Menu Items provides the settings to format your Overlay Menu top level links. These include Font Size, Padding (Horizontal and Vertical), Vertical Spacing, Radius, Text Colour and Background Colour. The Background Colour may be set to None, Colour, or Gradient. With the exception of the Radius, the same settings apply to the Sub Level Menu Items. However, Use Top Level Colour Styles is checked by default.
The Toggle Menu settings are the next to scroll into view. By unchecking Show Toggle Text, the toggle menu will appear as a simple icon bar. By unchecking Show Toggle Icon, the bar will contain just the text. It probably doesn't make any sense to uncheck both?
The Toggle Text Font contains the same options as the Menu panel as does the Toggle Icon Font menu. The Font Size is set to 24pt by default; the Icon Size to 30pt.
The bar's Fill mode is set to Auto by default, but may be set to Fill, Pixel Width, or Percentage Width. This gives you the option of having a simple icon button, or a full width menu bar, depending on your preference.
The Position is set to Fixed by default, so that the page content scrolls underneath the static bar. There is an option for Inline positioning, for when you have a link list embedded in a column. The vertical alignment can be set to Top, or Bottom, making it possible to have a menu bar at the bottom of the page. The Horizontal Alignment can be set to Left, Right, or Center.
Both the Margins and the Padding are set to 10px by default. By removing the Margins, the menu bar will align flush with the edge of the page. The button Radius is set to 4px by default, but can be set as high as 100 to allow for pill buttons or round icons buttons.
The toggle bar Text Colour is the next choice you have to make. Then the Background. The Background may be set to None, Colour, Gradient. or image. Images are scaled to fit the button width.
The same settings are available for the Hovered button, allowing you to have two different pattern states on hover, if so desired.
The next two settings are for Borders and Shadows. Both are off by default. When activated, the settings panel expands to display the styling settings.
Overlay Menu includes a separate Overlay Menu Extra Toggle stack which may be positioned anywhere on the page. The stack settings are identical to those found in the main stack. The extra stack has one advantage — you can drop it into a BWD SlideUp stack, to have it disappear when the page is scrolled.
Overlay Menu can also be set to open via any external button, clicking the next option Show External Data Link Info, will display the menu's data link id in edit mode.
The final option is labeled Experimental. It's an option to Replace Theme Menu. This may not work with all themes. But there are other stacks available that can help hide your theme's menu.
If you're tired of your standard theme menu bars, Overlay Menu is a great alternative.
Jeremy and his crew are always open to suggestions and I've been informed that an update to the stack is already in the works to include new options. I'm sure Jeremy won't mind me letting the cat out of the bag: The update will include List icons, Subtitles, the ability to hide OM at different screen sizes, Clickable Dropdown Items, a new interface for creating menus and perhaps a few other options.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16