Introducing System7

Drop-down menu navigation layouts have become a popular trend in modern web design. Although they are sometimes criticised by accessibility experts, generally they are favoured by both developers and site visitors and mimic navigation layouts found in common desktop software. However integrating drop-downs into websites is still a very challenging process. Many methods exist relying on a broad range of techniques and technologies. Integration in RapidWeaver is particularly difficult as page links get generated automatically and projects can be quite hostile places with any number of stacks or scripts running in the same page.

System7 is my own drop-down menu plugin developed from scratch specifically for RapidWeaver. I became very frustrated by the lack of decent drop-down menu scripts suitable for RapidWeaver. Existing scripts either had serious compatibility flaws or were completely bloated with messy code. It is called System7 because it incorporates 7 basic functions I deem to be essential for a drop-down menu in RapidWeaver:

1) Cross browser compatibility

The range of browsers and browsing devices in use now is quite daunting. At one end of the scale you have a decade-old version of Internet Explorer which can barely handle basic CSS code. At the other end of the timeline, browsers like Safari, Firefox and Opera pack in some serious technology and excellent support for web standards. It would be easy to say “no support for IE6”. But that is simply not an option for many I supply themes to. Fortunately System7 can handle all these browser versions without problem, and does so elegantly without any conditional comments or browser hacks, to keep things clean and future-proof. And it works on the iPad and iPhone really well.

2) Dynamic class selectors

A frequent request on the RapidWeaver forums is the ability to change the style of individual navigation links - to highlight particular pages for example. Currently this can only be done by wrapping links in span tags and using inline CSS. There is nothing seriously wrong with this, but it is not an ideal setup and does not work in many themes. What System7 does is to apply unique class selector names to all navigation links dynamically via the browser DOM. Using the Safari inspector or Firebug, it is possible to grab these selector names and apply custom CSS. Several style changes can be applied such as text formatting, fonts, colours and even icons. Apply styles to one or more links.

3) Ability to disable page links

If you’ve been studying existing drop-down navigation menus online, you may have noticed in many examples that the parent (trigger) link at the top is not actually a link to another page. Again this is something people had raised on the forums time and time again. But it has not been previously possible without constantly editing a site after publication, which is very tedious to say the least. System7 builds in support to disable navigation links, without actually hiding them. All that’s required is some basic HTML code in the page name to prematurely close a link, display static text and reopen the link tag to maintain validation.

4) Smooth and customisable animation

Lots of drop-down menus online are boring. They just have an option of open or close. This does not look particularly professional and the ‘had a go’ approach simply wont make the cut with professional designers and developers. System7 uses jQuery Javascript to create menus which fade in and fade out. Not only does this look and behave a lot better, but helps with site accessibility. The speed at which a menu fades in and fades out can be customised.

5) Intelligent styling

System7 can detect when a page link acts as a trigger for sub pages. It will automatically adjust padding and add either a downward facing arrow or a sideway facing arrow. This gives you the confidence to build more complex site layouts, without having to worry about menu structure. Everything is taken care of for you. There is no danger of padding or indicator arrows being misplaced where they are not required.

6) Fallback compatible

Apparently some loonies are still browsing the internet with no Javascript enabled in their web browser! Normally you would not get very far these days without Javascript - just about every major website and search engine relies on Javascript now. But it is reassuring to know that System7 will fall back to CSS-only mode, meaning the menu will still work in non Javascript-enabled browsers. Because menu links are created from a simple HTML unordered list, all links are perfectly accessible to search engines as well for improved SEO.

7) A true framework

System7 is not another ‘one trick pony’ jQuery plugin. It has been engineered to be expanded and built on. As well as powering basic drop-down menu’s, System7 has recently been used to power a full blown mega-menu in an upcoming RapidWeaver theme. It can be adapted and reused in various themes with excellent flexibility and robustness. RapidWeaver theme style and colour settings can be used, enabling end users to customise width and styles of drop-downs without any code.

Currently only the Media, Boxes Pro and Decorate themes have System7 built in. But there are at least four new themes in development by ThemeFlood which incorporate System7. Commercial agreements have also been made with a couple of other theme developers, so it is hoped System7 will find its way into other themes. The feedback so far has been very positive, many agreeing in full with the above merits. Although it is another one of these projects which has taken a huge amount of time to complete, hopefully System7 will provide many years of use, until we are at such as stage that CSS can be trusted to do everything.