FreeStyle Menus v1.0 RC11

by Angus Turnbull - http://www.twinhelix.com. Updated: 25 September 2006.

This script is a highly flexible means of converting HTML content into powerful popup menus, using either nested lists or DIV tags for menu data, and following best practice guidelines for powerful and accessible menus.

Features:

Here's another example of the script: multiple DIVs used to construct a menu. This will work in v4 browsers.

      File >

Edit >

 

Script License Agreement

You may use this script only if you agree that:

  1. You must EITHER:
    1. Donating Users: This script is "donation-ware". If you can make a donation to support this script, it may be used on a website without a crediting link. Please consider making a donation! I have spent a lot of time developing, debugging and documenting scripts, and any support is welcome. More info...
    2. Free Users: All websites using this script for free must contain somewhere a visible crediting link to TwinHelix Designs, e.g. 'DHTML / JavaScript Menu by TwinHelix Designs'.
  2. You must leave the "Script Name/Author/URL" comment in the source of the script file.
  3. This script is provided on an "AS-IS" basis, without any warranties, and you use it entirely at your own risk.
  4. This script may not be redistributed, sold, rented, leased or sublicensed to third parties without my prior consent.

If you have another use for the script (for example, within a web application) or wish to arrange alternate licensing terms, please contact me for more information.

 

Usage Instructions:

Everything's in the source of this page, all you need to do is open this document inside a text editor like Windows Notepad. You don't need to edit the JS file itself, and you can leave the demo script unchanged. You will want to open the .CSS file and change the menu formatting there though, and of course the menu data in the BODY of the page.

Once you have customised the menu data/appearance, paste the SCRIPT, LINK and UL tags into each of your site's pages. You might find it handy to use a templating system or server-side includes for this!

Upgrade notes: From v1.0RC9 and earlier, make sure you replace the 'animation' section in your HTML file and the 'fallback' LINK tag in the HEAD, and if you are updating the stylesheets replace the "new FSMenu" line in the HTML file too.

 

Good luck - Angus.

 

Advantages of this script

The main advantages of this script over a "pure" CSS menu (that use :hover states on elements) are that this script allows customisable show and hide delays for menus (so menus don't feel so "slippery", disappearing at the slightest provocation) and fancier effects. This means that your menus don't have to overlap; you can place them wherever you want. Also, its advanced "switch timer" means that you can mouseover neighbouring items while navigating to point at a submenu without hiding the submenu in question -- fixing a common (and accurate) usability complaint that many people level against popup menus systems! You don't give up compatibility though -- since this script uses pure CSS for formatting, it includes a separate stylesheet that allows fallback to a pure CSS menu when JavaScript is disabled or unsupported. Meanwhile, with clever CSS, you can make the script degrade very well in older browsers, perhaps to a plain nested list or a one-level set of header items.

When compared to a pure JavaScript menu system (where the menu data is stored in a custom format in a JavaScript file), this script is much more search-engine friendly and accessible to screenreaders and older browsers, as its menu data is stored in the page's HTML content. To enhance accessibility, test widely, and perhaps specify a MEDIA type on your stylesheet to avoid hiding submenus in screenreaders if you feel that would benefit your site!

Some other JavaScript menu systems are now using list data for their menu data store. However, they often use processing functions that copy the hidden list data to separate DIVs in the page, managed with their own layout system. This means you can't fallback to pure CSS menus like this script, and it may limit your formatting options -- with this script, you have the full power of CSS to format your menus however you want.

Overall, I've tried to build this script with "Best Practices" in mind, using each web technology where it's best suited: HTML for semantic data, CSS for layout and styling, and JavaScript for controlling behaviour. I hope you find it useful!

 

Script Help & Hints

Since this is the first release, there aren't many Frequently Asked Questions yet :).

If you want to make this script run across frames, you can trigger menus by calling the mouseover and mouseout events in another frame like onmouseover="parent.content.divMenu.show(....)" where 'content' is the name of the frame containing this menu script and all the menu data. You don't need to include the JS files in the triggering frame, and this will only work with the DIV menu version (not the list-version menus).

This script works best paired with an XHTML/CSS document, and a fair knowledge of CSS layout and formatting techniques. If you're not familiar with CSS, use this as a learning opportunity, as it's a very powerful tool!

To include your menus in each page of your site, it's best to use some form of include with the menu data stored in an external file. Check to see what your webhost supports; if you have something like PHP or Apache's Server Side Includes on your server, it's very easy, consult the appropriate documentation or helpfiles for more info.

Also, the "commented" script file contains some of the code for both div and list menus. If you are only using one type, feel free to edit it and remove the extra code; or perhaps just remove the NS4 compatibility code at the bottom, to get an additional speedup.

 

Extra Effects and Additions

I've bundled a bunch of extra effects for this script in the fsmenu_extras.js file included with the download. Feel free to load it up, you will find:

These should also serve as examples if you want to write plugins/extensions to the script yourself. I hope you find them useful!