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 compatibilityThe 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 selectorsA 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 linksIf 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.
5) Intelligent stylingSystem7 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.
7) A true frameworkSystem7 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.