Stacks4Stacks

Why yet another navigation stack? Several RapidWeaver users have made contact to request development of a 'Stacks4Stacks' branded navigation stack. The drop-down menu layouts used for ten years or more in many ThemeFlood themes (like Media and Flood) have managed to strike a near-perfect balance between ease of setup, flexibility, good accessibility and overall appearance. Many RapidWeaver users have been longing for one of our theme nav's to get converted into a reusable stack for use with other themes; where generally it has been felt the choice of quality navigation stacks have been somewhat lacking in abundance.

Navigation is one of the most important components to design and build correctly in a website. If end users are unable to navigate your website, they will abandon it and go elsewhere. For this reason, you should dedicate extra time into designing and deploying the best possible website navigation. As is so often the case, the 'simple is best' approach tends to work best with website navigation.

Absolutely brilliant. Worth every cent. I am yet to find a navigation design I have not been able to construct using Gator. The finished menu works perfectly. The extra accessibility features are a critical detail other stacks within this category seem to ignore. I had a particularly tricky menu to create for a client in Foundation and Gator had the job done in a matter of minutes.- Ralf

Key features of Gator:

• Compatible with a wide choice of popular and modern RapidWeaver themes. Easy to place inside ExtraContent areas or other stacks like grids or columns.
• Precise control over when the mobile menu morphs into the desktop menu and vice-versa.
• Vertical or horizontal orientations for the desktop menu.
• Quickly add additional content before or after the navigation links (like a site title, logo or social networking buttons).
• Manually code a list of links with HTML markup or use the page navigation links RapidWeaver generates from your sitemap.
• Excellent accessibility; including support for navigating with your tab key, optional title tooltips and setup of 'access keys' (keyboard shortcuts).
• Search engine friendly, to encourage easier indexing of your website.
• The menu can be optionally hidden in print and PDF output, to save your website users wasting paper or ink.
• Customise practically every aspect of the menu style, background, size and colouring.
• Core styling (like font faces) are inherited from your theme, to limit a need for lots of duplicated configuration and complicated code.
• Include any icons of your choice alongside page links, like free Font Awesome icons.
• Many units of measurement are not prefixed (e.g. 'px'), so you are free to use whatever preferred units of measurement you are most comfortable with or have desire to use.
• Compatible with RWML; meaning you can manually write menus in different languages and control which one is shown, based on the selected language.
• Beautiful, simple, silky-smooth animation effects on the desktop drop-down menu items.
• A clever option to render second-level page links in the format of a multi-column mega menu, which is brilliant for websites listing products or services.
• Clean markup and plenty of selector names means there's ample opportunity to further modify a menu with custom CSS code.

Example

This demonstration of Gator uses the default style options, with the navigation source set to custom HTML. We strongly recommend you download and play with the free demo version of Gator, to get a true sense of how extensively customisable this stack is.

Setup

Follow these instructions to get a Gator stack setup. Remember to mouseover the stack settings, to see informational tooltips about what each option does and special notes to follow.

1. Once installed into stacks and RapidWeaver, open your Stacks library. Drag and drop a copy of Gator into the page.
2. While in edit mode, select the stack to view its settings within the stacks side panel.
3. Change the Nav Source setting, to toggle between either page links your theme generates or custom HTML.
4. If you want to include the stack on every page, configure it as a Partial. please see the Yourhead Software website if you are unsure what a Partial is or how they work.
5. Preview your webpage to see the completed menu. Remember to test it at different screen widths.

Additional embellishments (like the ability to 'stick' the menu bar to the top of the page or apply a box shadow) are accomplishable using numerous other stacks that already exist. Gator works well with lots of other stacks.

Important notes

These are some other important notes, for consideration when using Gator.

• The Display Overflowing Content option may need to be enabled, if you are finding the menu drop-downs are not showing correctly. Typically the drop-downs nearly always are working for you, but they may be cropped or obscured by other page containers. This setting may help alleviate such problems and the 'scope' option allows you to limit overflow behaviour to particular portions of the page. Please exercise caution if you find yourself needing to enable this setting, because it can often break other stacks on the page like columns and sliders.
• If you find the drop-downs are going behind other page elements, you might need to increase the z-index setting. The higher the z-index, the further forward the menu bar and drop-downs will come.
• This is a feature-rich stack with a lot of different options. Naturally some settings conflict with one-another and may lead to undesired results. It is best to carefully review your settings, if issues start to arise.
• Take care that drop-down panels do not extend outside of the browser window area. This could be an issue if the menu bar is right-aligned and you have deep drop-downs that go beyond a second or third level.
• Gator assumes your theme follows the normal naming conventions for current and current ancestor links, per the standards set-out in the RapidWeaver theme API. Those being .current for current links and .currentAncestor for the parent links. If your theme uses different names, you may find the current page does not highlight correctly in the menu. This is resolved by supplying alternative class names for the current and current ancestor links.
• If writing the HTML markup for your own menu structure, be sure to follow the existing sample code presented to you. In particular, replicate any class selector attributes we have already used. Use straight quotes instead of curly quotes. If you find it easier, write your menu code in an external code editor and paste it back into RapidWeaver afterwards.
• A free variant of the Gator stack is available for use in premium ThemeFlood themes, like RWSkinz. This free version of Gator can be accessed here.

Accessibility

The accessibility of website navigation links is a vital consideration. In some regions of the world, there are potential legal ramifications for deploying websites that lack basic adaptations for persons with reduced capabilities. All of your website users deserve the best possible experience. Good accessibility is built into the heart of Gator and you have a combination of six powerful features at your disposal, for constructing a highly-accessible website navigation menu:

1. ARIA Label - This broadcasts (in speech) via a screen reader the name of your menu. It will then continue to read-aloud the title of each page link, which the user can then make a selection from.
2. Access keys - Applies a numbered accesskey attribute onto the first 9 parent page links. For example, using the keyboard shortcut of CTRL + ALT + 1 on Mac will navigate the user to the first link in the menu.
3. Outline focus - Special styling applied to individual navigation links when they receive focus via the tab key. This allows any website user to navigate through your menu (including drop-downs) using their keyboard tab key. Pressing the return key on a focused link navigates the user to that location.
4. Title tooltips - These are small tooltips displayed below the links on mouseover. They contain the title of the link and can prove useful to people who might be partially sighted or colourblind. Tooltips are often shown in a deeply contrasting colour scheme and some web browsers can be configured to substantially enlarge their font size too.
5. Units of measurement - We encourage the use of styling (like font sizes, line heights and spacing) to be specified in proportionate units of measurement (like percent, em or rem). This lets the webpage scale with greater fluidity and clarity, using the web browser zoom controls.
6. Hamburger confusion - The three bars or 'hamburger' button that denote a toggle menu on mobile are still an area of significant confusion for many website users. With this in mind, our button allows you to place custom text alongside the icon.

Both the mobile menu and desktop menu share the same HTML markup. This removes the danger of assistive tools getting confused by the presence of multiple navigation structures or reading-out the same links twice! While both the mobile and desktop menu's are optimised for accessibility, typically most accessibility tools are used through a desktop web browser and physical keyboard.

Including additional content

You have the ability to include simple content before or after the menu links, within the confines of the menu bar. Switch-on additional content in the stack settings and configure the styling of this content. Examples of additional content can include:

• Your website title.
• Social networking buttons; either text links or Font Awesome icons.
• A small logo image (ideally this should be scaled to the proper size, before being added).
• Contact details, an email address or a telephone number.
• A search bar, linking to a SimpleSearch, RapidSearch or RapidSearch Pro page.
• Greetings or business opening times, via Javascript or PHP.
• A RapidCart Pro snippet, to display the cart total or number of items in a cart.

The way CSS Flexbox works, additional content will be positioned relevant to the menu links on a implicit basis by the web browser, using a method of 'best fit'. Therefore it is normal that the alignment of your navigation bar may require changing, in some circumstances to attain better presentation. On mobile, your additional content will be placed at either for top or bottom of the menu box.

Including icons beside links

Font Awesome icons are supported in Gator. Adding icons to the RapidWeaver generated navigation links is as simple as double-clicking the page name, shown in the lefthand RapidWeaver site tree. Enter your Font Awesome Icon (or whatever) markup before or after the link text:

<i class='fa fa-home'></i>

Or if your theme uses Font Awesome 5 icons:

<i class='fas fa-home'></i>

Although not essential, converting double-quote characters to single quote characters can give better result in better presentation of links, within the RapidWeaver sitemap page type. You should also give your webpages sensible titles.

Another use of icons is to display an indication that a parent link is of host to child links. Like above, you can add your Font Awesome markup directly after the page name:

<i class='fa fa-caret-down arrow'></i>

Or if your theme uses Font Awesome 5 icons:

<i class='fas fa-caret-down arrow'></i>

The addition of the extra 'arrow' class will be used by Gator to omit these arrows in the mobile menu. The 'arrow' class can also work in some themes to omit the display of these icons in places like your breadcrumb links and sitemap. For example, to manually hide these icons in the breadcrumb, a user or theme author can do something like this:

#breadcrumb .arrow {
	display: none;
}

Pay particular attention towards the version of Font Awesome icons being included by Stacks or your theme. There were substantial changes in the markup of Font Awesome icons, between version 4 and version 5.

Browser compatibility

Gator embraces some of the newest CSS technologies (like Flexbox) to make setup of this stack easier and more intuitive. The completed navigation bar will promote the highest standards of both flexibility and accessibility. Once configured, Gator will give years of future-proof service. Expect the Gator stack to work reliably in all newer web browsers. In older web browsers that do not support Flexbox, the navigation bar will begin to safely degrade back to a simple vertical stack of elements. At no point will the navigation bar become hidden or inaccessible to your website users. Older web browsers were designed to simply ignore CSS they did not understand.

Theme compatibility

Gator is not universally compatible with all RapidWeaver themes. Every theme generates unique markup and styling for page navigation. We have eagerly tried to make Gator compatible with the widest possible choice of popular themes. However the modular nature of RapidWeaver means there will always be some themes where it does not work as expected. We have no control over the navigation links that a theme generates. In those instances, you may need to use custom CSS code to address minor styling issues, custom code your own menu with HTML markup or assume the stack will not work in that particular theme setup. It is the responsibility of the stack user to fully evaluate the compatibility of Gator, before committing to a purchase. A free, fully functioning demo version is provided to assist you with testing. All purchases are final and refunds will not be provided.

Current ancestor and current link styling

It is often appropriate to give current ancestor (parent) and current links slightly different styling, to give the end use a clearer indication of what page they are currently viewing. The selector names to identify current ancestor and current links is controlled by the theme developer, in their theme.plist file. For example, if you are using the Foundry 1 theme, the selector names for current ancestor links is this:

ul li.Selected a.parent-link

And for current links:

ul li a.nav_active

Sadly not all themes are created equal or to the same standard. Most notably, the latest versions of Foundation 6 and Source completely forego the use of current ancestor and current selector names set in the theme.plist file. So you'll need to contact the developers to ask for an alternative solution (like PHP or Javascript) to identify current and current ancestor links in these frameworks.