FreeStyle Menus Demonstration

# FreeStyle Menus v1.0 RC9

by Angus Turnbull - http://www.twinhelix.com. Updated: 11 June 2005.

- Home
- Demo Submenu
  - Here's a submenu item.
  - Items auto-size based on the text they contain.
- Submenu #2
  - Nested menu 1
    - As many levels as you need.
    - All styled via CSS.
  - Nested menu 2
    - Another nested menu.
    - It's still built with nested lists.
  - These menus have true 'switch' timers.
  - Imprecision doesn't mean collapse!
- Easy to use!

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:

- Pure CSS formatting allows infinitely customisable menu appearance using the standards-based technology you know.
- Accessible HTML elements used to construct the menus, so your site maintains excellent search engine and screenreader compatibility.
- Object-orientated JavaScript for separate menu systems and easy implementation; you don't have to know any JavaScript to use the menus.
- Fallback to pure CSS menus where JavaScript is disabled.
- Hierarchial / Multilevel menus supported -- as many levels as you want!
- Menus are relatively positioned from their parent menu/item.
- Plugin animation framework allows you to easily implement and customise animation effects for your menus.
- Customisable show/hide timers applied to menus, so your menus don't have to overlap.
- You can mouseover neighbouring items without hiding submenus, using a powerful 'switch timer' option. No more of that 'slippery' menu feeling!
- ONCLICK support is optional for menus.
- Keyboard Navigation using standard TAB and SHIFT-TAB link focusing with the list-based menus.
- Tiny, fast script since data is in the page BODY; it's as little as 7kb in size, so your visitors won't be kept waiting.

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

File >
Edit >

File Menu
Reopen >
Format >
Documents:
Recent 1
Recent 2
Locations:
TwinHelix Designs
Format Menu
Option 1
Option 2
Edit Menu
Option 1
Option 2

#### 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. The JS file itself you don't need to edit, 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.

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 is easy to include a NOSCRIPT tag that allows fallback to a pure CSS menu where 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 the set of first-level menu 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:

- <SELECT> Box and IFRAME Fix, to stop menus being covered in IE.
- Menu title display, like on my website.
- Floating menus that scroll with the page as the user drags the scrollbar.

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

Select Menu Style: