Introduction
A common request made by many RapidWeaver users is the ability to disable links in a drop-down menu, but keep the text displayed in the menu and acting as a trigger for sub-pages. Traditionally under RapidWeaver 3.6, the trick was simply to use an offsite page style, and type a hash (#) character in the redirect URL box. However as many have since found, this method does not work in newer versions of RapidWeaver, which instead prepends anchor tags with the site path. Thus, the page link remains active and starts returning error 404's if clicked. This can result in serious detrimental effects to site accessibility and SEO.
Other methods have since been devised, requiring users to enter HTML code tags within the page name, to systematically open and close anchor tags generated by RapidWeaver and display static text. However the requirement to use code creates a potential tripping hazard for novice RapidWeaver users, and the page list in RapidWeaver becomes awfully messy and complicated. It was also found that disabled links started creating problems in certain page styles like Sitemap.
Most third-party RapidWeaver themes already contain the jQuery Javascript library to power elements like ExtraContent and drop-down menu's. So in my eyes, it made sense to develop a simple script which would enable parent links in a navigation structure to be safely and efficently disabled. The Link Suppressor is mainly intended for third-party theme developers to incorporate into their themes as a optional setting. However this script may also be of help to those customising themes.
Key Features
Link Suppressor has been developed to facilitate nearly all the potential needs of both novice and expert RapidWeaver users. In particular, Link Suppressor supports the following functions and behaviours:
- Link Suppressor makes use of an existing version of jQuery already being called by a theme (to power aspects like ExtraContent or drop-down navigation). This makes it a very efficient addition to RapidWeaver themes, with negligible impact on page performance or bandwidth
- If Javascript is disabled, the menu items can still be selected. The actual 'disabled' pages can be formed of basic links or content, which the end user or machine is still able to view.
- Provides control over exactly which menu's in a theme have link suppression applied, for example it can be applied to your main toolbar, but other toolbars like footer links or iOS navigation can be excluded from link supression.
- The Link Supression script can be placed inside the closure of an existing Javascript file, or you can provide it as an optional theme setting for end users to toggle on or off (see the setup details below).
- The script dynamically applies a class selector of
nolinkon all disabled links, which can have additional CSS rules applied like colours or mouse cursor behaviours. - Zero coding or configuration required by the end user of the theme, once setup it just works automtically whenever it is toggled on.
How To Incorporate Link Suppressor Into A RapidWeaver Theme
The exact setup of link suppressor varies, and it should be emphasised that not all RapidWeaver themes will support it. It is recommended that only theme developers attempt the setup of this code, unless you have experience with HTML and Javascript.Typically you should start with a duplicated / renamed RapidWeaver theme and open the theme contents. Then open the main scripts file in the theme, where all the core jQuery scripts used by the theme are stored. Copy in the code shown below.
// Link Suppressor script by Will Woodgate - visit http://www.willwoodgate.com/ for more information
$(document).ready(function(){
$("#nav li:has(ul)").hover(function() {
$(this).children("a").addClass("nolink").click(function(e) {
e.preventDefault();
});
});
});
You may need to modify the selector names presented in this code, so that it takes effect on the navigation layout presented in the theme already. Multiple selector names can be chained in, by using commas between them. In this instance, Link Suppressor will get applied to the #nav. If the theme is using jQuery .noConflict() then you will also need to adjust the code to incorporate it into the theme namespace / closure.
Incorporating Link Suppressor As A Theme Option
Setup is similar to that above, but rather than incorporating the script into the theme scripts file, it is placed in a file of it's own within the theme. A new theme option can then be added to the theme.plist file, letting an end user toggle the link suppressor on and off. To get the Link Suppressor script sharing the same namespace / closure as the RapidWeaver theme is already using, modify the code.
What RapidWeaver Themes Already Support Link Suppression?
All ThemeFlood RapidWeaver themes with support for drop-down menu's will be receiving support for Link Suppressor over the next several weeks, starting with the Flood RapidWeaver theme. If you are using a theme by another developer and you want support for Link Suppressor, then you should ask the developer. If they can't or don't want to support Link Suppressor, then you can contact me for a quote for customising your RapidWeaver theme.
Does Link Suppressor Work With Other Publishing Platforms?
In theory it should be feasible to incorporate Link Suppressor into another publishing platform like Wordpress or a standard HTML / XHTML based website. Again compatibility will depend somewhat on the exact setup.