Flyout Menus

The University of Washington Home Page, as well as other pages on www.washington.edu use DHTML and Javascript to implement "Flyout Menus". When the pointer passes over a link which has a menu, an image appears next to the item which leads to a box showing different options the user can select. If the mouse passes into another one of the links, the original menu disappears and the new one shows up. If the mouse passes completely out of the menu and the navigation area, then the menu will go away after a one second delay.

The source can be viewed in three ways:

In its entirety
As downloadable text
Annotated with comments

If you wish to check the syntax of your Flyout Menus, you can do so with the Flyout Menu Tester. The Flyout Debugger tests your menus on your actual page.

The version document here is 2.9 from May, 2005. Thanks to Allen Olson who did the initial DOM support.

Instructions on use of the Flyout Menus are below. Also available are instructions for using the complex positioning methods, as well as methods for using predefined menus.

You are free to copy and/or use these flyout menus (or derivative works) but please make sure that the comment block at the top of the Javascript file remains intact and in its entirety.

Note that these menus were specifically designed with www.washington.edu in mind, but they should be adaptable to other sites, provided you supply a style sheet and change the defaults as per the Customizing section below. You may also want to investigate DHTML Lab's HierMenus for a different implementation, with different features.

Using Flyout Menus

This section explains what code needs to be added to a page to use Flyout Menus in the following link:

Using Flyout Menus

A simplified version of this example is available which shows the menus being implemented without the descriptive text, making it easier to see exactly what's involved in using the flyouts.

CSS Definitions

If you are not using www.washington.edu, you will need to define a small amount of CSS. This example defines all links within barlink or navlink classes to have no underline decoration, as well as making barlink white in color (so it shows up against the dark blue title bar). The CSS can be viewed in the source of the example.

Developers on www.washington.edu can use the barlink and navlink classes which are already defined in the Home Page CSS file.

Main Script

In the HEAD part of this page is a link to the Javascript file which is loaded. Note that this must appear between the <head> and </head> tags of the file.

<!--chtml include "//home/incs/flyout.inc"-->

This is a global chtml include file which contains the necessary Javascript to load the Flyout Menus program if the browser supports it, as well as optionally disabling flyouts. If you are not using chtml on www.washington.edu, the contents of that file are:

<script type="text/javascript">
<!--
function mIn () { return true; }
function mOut () { return true; }
function makeLayer () { return true; }
function flyDefs () { return true; }
if (! document.flyout_disable && 'undefined' != typeof document.getElementById)
    document.write ('<' + 'script src="/home/scripts/flyout.js" ' +
			'type="text/javascript"><' + "/script>\n");
// -->
</script>

If you are not on www.washington.edu at all, then you need to replace /home/scripts/flyout.js with a full URL: http://www.washington.edu/home/scripts/flyout.js

Note that what goes into the document head has a bit of code, but all the main definitions are actually in the file flyout.js. There are several workarounds in these few lines:

Netscape 2 can't read Javascript from an external file. If we allowed the browser to not read the file at all, the functions mIn () and mOut () would not get defined, causing errors. We therefore define stub functions in their place.
Netscape 3 can read files from external files, but it will ignore the language version when reading from external files, while honoring it when the code is local to the file. Further down, we have external Javascript files which are limited to Javascript 1.2. Therefore we define makeLayer () and flyDefs () as dummy functions so the layer definition external files won't give errors.
Netscape 3 also handles an older version of Javascript than Netscape 4 and Internet Explorer 4. Doing the test for DHTML capability before emitting the code to read in flyout.js allows us to be sure that the file will only be interpreted by newer Javascript interpreters.
Many browsers would be confused by seeing </script> in the argument for document.write, even though it's in a string. We work around that problem by splitting the string to make it not look like the end of the script block, but it will still print out the same. Since there may be some browsers which would also be confused by seeing the <script>, we split that, too. Another method is to use a \ to camouflage the tags such as <\/script>, but the HTML Tidy checker still sees it as closing the script block.
You may want to be able to disable the flyouts even if the browser normally allows them. This can be done by setting the variable document.flyout_disable to 1. An example when this is useful is if you are traversing your flyouts with the DOM attributes childNodes, firstChild, nextSibling, etc., which does not work with Opera 6. In this instance, you could disable flyouts if document.childNodes doesn't exist.

Link Definition

Within the body of the file comes the HTML to actually create the link:

<a href="#using" onmouseover="mIn ('menu1')"
    onmouseout="mOut ('menu1')">Using&nbsp;Flyout&nbsp;Menus&nbsp;<img
    src="/home/graphics/mo/noarrow.gif" width="6" height="11"
    id="menu1" border="0" alt="" /></a>

Instead of spaces,   is used to force everything onto one one line. This includes the image of the arrow which comes after the link text. The important additions are the id argument to the <img> tag and the onMouseOver and onMouseOut arguments to the <a> tag:

id="menu1": Used by the Flyout Menu script to position the menu, which will appear just to the right of the image. The value must match that of the onMouseOver and onMouseOut arguments to the <a> tag, as well as the menu created in the script at the end of the file's <body> section.
onMouseOver="mIn ('menu1')": Tells the script to display the flyout menu when the pointer is passed over the link.
onMouseOut="mOut ('menu1')": Tells the script to set a timer to remove the menu one second after the mouse has exited the link and menu.

Menu Creation

Last, at the end of the document's body is a link to script which actually build the menu:

<script src="menu1.js" language="Javascript1.2" type="text/javascript"></script>

The contents of the script are:

makeLayer ("menu1", "Using Flyout Menus=#using",
    "CSS=#using-css",
    "Main Script=#using-procs",
    "Menu Creation=#using-creat",
    " Tag Name=#using-creat-name",
    " Title=#using-creat-title",
    " Items=#using-creat-items",
    "Link Definition=#using-link");

This code must appear after the code definition. Although it isn't required, it's advisable to require Javascript version 1.2 for this script. No harm is done to run it on older Javascript versions, but it will not have any effect. The notable exception is Netscape version 3, which will execute the script anyway.

The arguments to the makeLayer () function are the Tag ID, Title, and Items.

Tag ID

The "menu1" argument associates the text link with the Flyout Menu and the arrow image, which are described below in the link definition.

Title

The text supplied to the Title argument will appear as the title for the menu. In addition to the text "Using Flyout Menus" is a link definition, =#using, which causes the text to be an active link.

You can change the target of the link (for example, to open the link in another frame, or in a new window) by specifying the target at the end of the link with @. For example, if you wanted to link to a search engine in a new window, you would use:

"Search using Google=http://www.google.com/@_blank"

UWIN with flyout Some of the centrally-managed pages on www.washington.edu set the title of the Flyout Menus to be the same as the link which activates the menu, as well as making the title an active link which points to the same location. An example of this is shown from the UWIN page in the image on the right, with the purple-on-grey "Student Guide" being the link which triggers the Flyout, and the white-on-purple "Student Gude" being the title of the Flyout Menu (which is also a link and clickable). This is because some people don't realize that the link which triggers the Flyout is also active, so it gives them another opportunity to follow the main link in addition to the other links in the menu.

Items

Each of the item entries defines a single menu item. A destination link is specified just as it is in the title. If there is a space before the text, then the item will be indented in the menu. Multiple spaces create multiple levels of indentation.

Customizing Flyout Menus

Some of the parameters for the Flyout Menus can be customized, as in this example. The text style has been changed, as has the color of the menu border and background. In addition, the Flyout Menu will stay for three seconds after the pointer is moved away, instead of staying for one second. Also, the image used has been changed.

Customizing Flyout Menus

The simplified version of this customizing example makes it easier to see just the components needed to do custom flyout menus.

Main Script

The main script is included the same way as in the previous example. However, note that this particular document only includes the script once, even though multiple menus (and even multiple kinds of menus) are defined.

Style Definition

Because we want the text of the menu to look different than the standard, a style sheet is created with those changes in mind:

<style type="text/css">
    .menu2text {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
    }
    .menu2text a:link, .menu2text a:visited { text-decoration: none; }
</style>

The style sheet must come before the menu definition described in the next section. This is because the style must be defined before it is used in the creation of the Flyout Menu. The W3C has more information about how to use cascading style sheets.

Menu Creation

As with the first example, the menus must be defined at the very end of the HTML body:

<script src="menu2.js" language="JavaScript1.2" type="text/javascript"></script>

The contents of this file look quite different from the previous example:

var newDefs = new Object;
newDefs.overimg = "redarrow.gif";
newDefs.background = "#cccccc";
newDefs.border = "#ff0000";
newDefs.useclass = "menu2text";
newDefs.timeout = 3000;
newDefs.pause = 100;
flyDefs (newDefs);

makeLayer ("menu2", "",
    "Menu Script=#custom-procs",
    "Style Definition=#custom-style",
    "Menu Creation=#custom-creat",
    "Link Definition=#custom-link",
    "",
    "Customization=#custom-cust",
    " Image Definition=#custom-cust-img",
    " Background and Border=#custom-cust-color",
    " Text Class=#custom-cust-class",
    " Timeout=#custom-cust-timeout"
);

The first set of lines which change the appearance of the menu will be described below. This menu has no title string, and therefore will have no title in the menu. The empty string between the two sections creates a dividing line in the menu.

Link Definition

Other than the different text, image, and tag ID, the link looks just like the previous example:

<a href="#custom" onMouseOver="mIn ('menu2')"
    onMouseOut="mOut ('menu2')"
    class="menu2text">Customizing&nbsp;Flyout&nbsp;Menus<img
    src="noredarrow.gif" width="23" height="11" border="0"
    id="menu2"></a>

Customization

The flydefs () function lets you change the appearance of the Flyout Menus. Notice that in addition to being enclosed with parentheses, the arguments to this function are also enclosed in braces, {}. The braces are the Javascript syntax to create an object, which is what flydefs expects. You only need to pass the parameters you wish to change from the defaults.

Image Definition

To change the arrow image, you should make sure to have a pair of images which are the same size. You should place the image in the HTML link, and define with flydefs the image which is used while a menu is active. In this example, the images are noredarrow.gif and redarrow.gif.

outimg: Path to the image to be used when the menu is not being displayed, noredarrow.gif in this example. This same image is used as a placeholder in the HTML section. Normally, this image will be the same size as the arrow, but either a solid block the same color as the page background, or a completely transparent image. The default image is a solid white rectangle 6 pixels wide and 11 pixels high. If outimg is not defined, it will be the same as the original image on the page.
overimg: Path to the image to be used when the menu is being displayed, redarrow.gif in this example. The default image is a blue arrow pointing right, also 6 pixels wide by 11 pixels high.

Background and Border

The background and border can subtly tie in the menu with the rest of your page. Be careful that the background does not conflict with any of the text colors you use (normal text, unselected links, and selected links.) Both of these parameters should use colors which are Web Safe and in the same format as used in style sheets.

border: The color of the Flyout Menu's border and (on Microsoft's Internet Explorer) divider lines are set with this option. This example sets the border to #ff0000, which is red. The default color is a dark blue, #333399.
background: This color defines the background of the Flyout Menu. A light gray (#cccccc) is used by this example. The default is white, #ffffff.
titlebackground: If you wish to have a different color for the title, then set this value. This example does not set this value, since no title is visible. The default is a dark blue, #333399.

Text Class

These variables are used both for plain and link text in the Flyout Menu.

useclass: A style class to use for both plain and link text. This example uses the class defined above, menu2text. The default is the navlink class. Developers who use the Home Page style sheet will already have navlink defined.
titleclass: If you wish to use a differnt class for the title, then set this value. This example does not set this value, since no title is available. The default is to use barlink class. Developers who use the Home Page style sheet will already have barlink defined.

Menu Position

This variable allows you to change the default Flyout Menu behavior of positioning the menu to the right of the image.

positionleft: Set this value to 1 to make the Flyout Menus appear to the left of the trigger image.
alignright: Set this value to 1 if you wish the text in the Flyout Menus to be right-aligned.
hpad: How much to vertically move a menu away from the edge of the trigger image. Positive numbers move it away from the edge of an image (normally the right edge, unless positionleft is selected, in which case the menu will move away from the left edge), and negative numbers cause the menu to overlap the image. The default is 2, which makes sure there is a 2 pixel gap between the menu and the image.
vpad: How much to vertically move a menu from the top of the trigger image. Positive numbers move down, negative numbers move up. The default is -2, which moves the menu up 2 pixels from the top of the trigger image.
position: Used to define a string to use a much more complex set of rules to position flyout menus. More information can be found in the Complex Menu Positioning page.

Timeout

If you wish to make the Flyout Menu to remain for shorter or longer than one second after the pointer moves out of the menu, the timeout variable can be used.

timeout: The number of milliseconds to wait before removing the Flyout Menu. This example sets the value to 3000 (3 seconds.) The default value is 1000 (1 second.)
pause: Before the menu displays, there is a slight pause. As with timeout, this value should be in milliseconds. This example sets it to 100 (0.1 seconds.) The default value is 250 (0.25 seconds.)

Callbacks

The Flyout Menus allow you to write Javascript which is called during certain operations.

preDetach (lyr): If you are using predefined menus, you can use the preDetach callback to manipulate your menu before it is removed from the normal HTML flow. The lyr argument is the object which will be removed and turned into the flyout.
showImage (obj, lyr): This function will be called instead of replacing the image with the value of overimg. The obj argument is the object which the flyout script would normally change (but it can be something other than an image), and lyr is the flyout.
hideImage (obj, lyr): This function will be called instead of replacing the image with the value of outimg. The arguments are the same as for showImage ().