Stacks4Stacks

The SuperMenu stack has been carefully designed and built at the request of several RapidWeaver users. The brief was simple: build a mega-menu stack that is safe and easy to setup in pages, bountiful customisable options, fully responsive behaviour, and support for many different content types. What SuperMenu delivers today fulfils all of this criteria, and a whole lot more. SuperMenu helps you consolidate page content and conserve screen space. But equally so, SuperMenu puts content within easy and accessible reach of your website users. There are many innovative methods in which you can incorporate SuperMenu stacks into your websites.

Key features at a glance

• A fully responsive mega-menu stack that works great on desktops, tablets and smartphones, in most RapidWeaver themes
• Innovative full-screen-width menu, with resizing and browser orientation support (based on TopBox source code)
• Trigger SuperMenu panels by either click, hover or a custom URL query from another location
• No nasty CSS or Javascript hacks to break the default Stacks layout code or override CSS already set in the page
• Static or linked parent links, with full support for Font Awesome Icons in compatible RapidWeaver themes
• An incredible choice of easy-to-use customisable style, colour, animation and layout options
• Support for numerous content types; including text, images, links, forms, sliders, tables, audio and even video
• Simple on / off toggle animation effect to maintain fast page loading and reduce the risk of Javascript conflicts
• Fully compatible with the PlusKit @import function, for seamless integration across multiple pages
• Automatically hidden on print and PDF output, to keep things tidy and user-friendly
• Completely valid HTML5 and CSS source code. Search engine optimised source code and simple HTML markup
• Excellent cross browser compatibility with many different web browsers and input devices of various ages
• Clean and simple editing interface in Stacks edit mode. Support for unlimited SuperMenu stacks on the same page
• Freedom to arrange SuperMenu stacks on a page, however you want

SuperMenu works in all ThemeFlood RapidWeaver themes and the Blueball FreeStack system. Compatibility and overall 'usefulness' in other RapidWeaver themes varies. A free demo version of the stack is provided for you to evaluate before purchase. We strongly recommend using the free AdaptiveGrid stack if you want to place multiple SuperMenu buttons horizontally or setup responsive columns within each SuperMenu drop-down panel.

Examples

The first example below shows a basic group of SuperMenu stacks. A five-column AdaptiveGrid stack was used to place each of the SuperMenu stacks within. AdaptiveGrid stacks were again used within each of the SuperMenu drop-down panels, to present columns of links, static text and images. Resize your web browser window to see the responsiveness. These SuperMenu stacks activate on mouseover (or tap).

 
This group of SuperMenu stacks are similar to the first example above, however we instead trigger the drop-downs on click or tap. By triggering on click, a user has more freedom to move their mouse cursor around on the page, and this opens up possibilities of experimenting with other content types like video and contact forms (contact forms require the PlusKit plugin). SuperMenu includes a special mechanism to stop iFrames, video or audio playing, when the menu panel is closed. Clicking the close button or anywhere outside of the SuperMenu will close it. As of version 1.1, you can now also set a SuperMenu panel to be open by default, at the page loads.
 

 
The examples shown above are just very quick setups to demonstrate the sort of things that SuperMenu can do. You can certainly design every SuperMenu panel with great care and precision, to create an exceptionally professional mega menu. SuperMenu provides a strong and dependable framework to build mega menu's with, time and time again. Navigation is one of the most critical parts of a website, and so we've worked hard to design and develop the SuperMenu stack over the course of several months to encompass a lot of features and functionality that users like yourself could potentially need.

SuperMenu stacks do not need to be collectively grouped together, as per the examples above. You can individually disperse them throughout a page. This technique is particularly useful, if for example you want to display SuperMenu stacks next to corresponding products on an e-commerce page; and use SuperMenu stacks to display additional product information, video content, variations or purchasing options next to each listing. The full-width panels compliment full-width and parallax RapidWeaver theme designs really well.

Setup

To setup one or more SuperMenu stacks in your page, follow these general setup instructions:

• Once installed, drag and drop a SuperMenu stack into your Stacks page
• Double-click the text 'My SuperMenu' to change the menu button text shown. This can be set as a link too, if you prefer.
• Drag and drop content into the placeholder marked 'Drop stacks here'. For best results, start with something like UsefulStack or AdaptiveGrid and gradually construct the menu panel with your content
• With SuperMenu selected in Stacks edit mode, change any of the settings shown on the right. Every SuperMenu stack must have a unique ID in CamelCase format. Any of the other style or behavioural settings listed can be changed too, if you prefer.

As always, hover-over the SuperMenu settings with your mouse cursor, to see an informational tooltip about what each setting does. You can easily clone (duplicate) SuperMenu stacks by ALT + Clicking on one, and dragging it to a new location in the page. You can use multiple SuperMenu stacks on the same page, but SuperMenu stacks should not be nested within each other. Every SuperMenu stack requires a unique ID, otherwise they will not open. This ID also comes in useful for triggering SuperMenu stacks from another location.

If your SuperMenu stacks are situated within a container that has fixed positioning applied (like a fixed header bar), you will need to change the SuperMenu stacks to fixed positioning, in the SuperMenu Panel Settings > Panel Position settings. The rest of the time, the SuperMenu positioning can be left as 'absolute', which is the default. These positioning settings help mirror your existing page setup.

Triggering a SuperMenu stack using a URL hash

This is a very useful feature of SuperMenu to use, in instances where you want to direct users to a page on your website and have a specific menu panel open automatically as the page loads. For example, you might have sent out an email newsletter to your customers about new products or special offers, and you want to send customers straight to that particular SuperMenu panel, advertising the products and providing direct links to them.

Getting this working with SuperMenu is remarkably easy. Just append a hash character (#) to the end of the page URL and type the SuperMenu ID (the same one you entered in the stack settings). So if for example you have a SuperMenu stack in your page with an ID of SpecialOffers, you could get that panel to open automatically, using a link like this:

http://example.com/#SpecialOffers

Here is a real working example:

https://stacks4stacks.com/supermenu/#SuperMenu21

These links are well-supported and can be used almost anywhere, like other web pages, emails, tweets and social media websites. Triggering of SuperMenu stacks using this method should only be used in conjunction with the menu activation being set to On Click, in the stack settings. Otherwise you'll find the moment the mouse cursor is moved, the menu will close again! And as you would expect, you can only trigger a single SuperMenu stack per-page, using this method. The mechanism to trigger menu panels with hashes was updated in version 1.3.0, released 6th March 2017.

Positioning SuperMenu stacks on the page

Much the same as any other normal stack element, you can drag and drop individual SuperMenu stacks anywhere into your page. They will respect the existing page flow and will remain wherever you place them. Although the drop-down panel is separate to the trigger button, both elements will get anchored together.

To group SuperMenu buttons together (like a conventional horizontal navigation menu in a web page) it's best to put SuperMenu stacks inside a grid or column stack. This will let you easily float the buttons next to each other, in a preferred order. The standard columns stack supplied with the Stacks plugin works fine for this job. If you need more options and greater flexibility (including responsive behaviour) then consider using the free AdaptiveGrid stack, which is perfect for use with SuperMenu.

To put SuperMenu stacks in other parts of the page (like in a theme header or as a substitute for the theme navigation) it's best to ensure your SuperMenu stacks are nested within a single ExtraContent stack. Use the Preview ExtraContent Containers option in your theme (if one exists) to see where each ExtraContent container is located and its number. Change the number applied to the ExtraContent stack, to match the corresponding ExtraContent container you want to put your SuperMenu stacks in. Some ThemeFlood themes also include the option to turn-off the standard page navigation links that RapidWeaver generates. It's impossible to provide a single set of instructions for theme setup, as every theme is different in structure and appearance. However most third-party themes have support for ExtraContent, and ThemeFlood themes allow you to edit the theme index.html file to move ExtraContent containers into other positions of the page; see the theme user guide for details about this.

Cloning the same SuperMenu stacks across multiple pages

As normal, the best tool for the job is PlusKit and the trusty old @import function. Create a new Stacks pages on your website and set it to hidden. Give the page a name and use it to host your SuperMenu stacks. From this point, you can easily import this same page into multiple other pages, within your project. Any changes made on this 'master' SuperMenu stack page will take effect on the other pages. Because PlustKit does all the movement and merging of pages within RapidWeaver (before export or publishing), it's extremely fast and reliable. No messing around with complicated Javascript or PHP code! PlusKit is not included in the purchase of the SuperMenu stack, but can be purchased cheaply from the Loghound Software website.

SuperMenu stacks on smaller screens

Providing that the menu panel is set to absolute positioning, users viewing your SuperMenu stacks should encounter no issues accessing the menu panels and scrolling them vertically with finger gestures, on smaller handheld tablet and smartphone devices. Menu panels can be toggled open and closed by tapping them. Things are more difficult if menu panels are fixed, as users will not be able to scroll or pan the menu panel (this goes back to the basic fundamentals of CSS laws).

It's possible to set a breakpoint in the SuperMenu stack settings. Doing so will hide the SuperMenu button and panels on screens less than the size you specify. This can be very useful if you wish to replace SuperMenu stacks with alternative content, on smaller screens.

Print / PDF output

SuperMenu buttons and panels are automatically hidden from print and PDF output. If you wish, you can use UsefulStack to provide alternative print content in their place.

Compatibility

SuperMenu has been tested and confirmed to work in IE10, IE11 and the latest versions of Edge, Safari, Firefox, Opera and Chrome. Theme and stack compatibility depends on the addons being used and their version. For that reason, a free demo version of SuperMenu is provided for you to fully test before purchase.

Support

Support is provided for general setup and usage of this stack, including frequently or commonly asked questions. Free support does not cover modification of RapidWeaver themes, modification of the SuperMenu stack or enhancements to improve compatibility with third-party stacks. Updates are provided free, via the Sparkle update mechanism in RapidWeaver. Paid consulting and one-to-one support services are available for more complex troubleshooting or customisation, charged by the hour.

How does SuperMenu actually work?

As you may already know, the Stacks plugin applies overflow:hidden on all stack elements, via CSS. This immediately presents the problem of how to display overflowing content, like a drop-down menu. Other developers 'hack' the CSS code to override it; but this is neither wise, nor a longterm solution to the problem. What we do in the SuperMenu stack is to use jQuery Javascript code and calculate the position of your SuperMenu buttons from the top of the page. Based on the button position (and other parameters like button padding, margin and borders applied in the stack settings) we then absolutely-position the drop-down panel, from the top of the page. This method takes the drop-down panel out of the existing page flow and away from the CSS code that the Stacks plugin applied. We also have to take into consideration screen sizes and ensure things are re-calculated if the screen changes size or orientation.

By default the drop-down panel is loaded hidden, but mousing-over or clicking the SuperMenu button triggers the drop-down panel and displays it. If you choose to have SuperMenu stacks reveal and hide on click, then some extra code is run to ensure that audio or video content playing in the page gets terminated (and doesn't continue to play in the background). This is done by firing an event on the page (when the close mechanism is triggered) and nullifying the media source attributes.

We provide a lot of different style and layout settings in SuperMenu. These allow you to build a mega-menu that looks unlike anything else other RapidWeaver users might be building. Plenty of class selector names are included in the HTML markup, so advanced users have the freedom to hook-on additional custom CSS code. Care has been taken to ensure SuperMenu will play nicely with a wide variety of different Stacks4Stacks stack elements and stack elements from other companies. Although we cannot foresee SuperMenu working with every combination of stacks available, it should work with most common stack types, like columns, text, HTML code and images.