Fly-out Menus Documentation

Contents

• Summary
• Usage
• Reference
• Remarks
• Customizing

Example page: unformatted menu
Example page: formatted menu

Summary

The Fly-out Menu displays a general-purpose menu control, supporting a variety of features and display options. In response to a selection of a menu item, the Menu will navigate to a new page or call a script function that you specify.

The Fly-out Menu object is created in javascript with the Menu object, and three types of menu item objects: Links, Actions, and child Menus, which can contain other Links, Actions, and child Menus.

Usage

Create a menu initialization script file to share

Because most pages on your website will probably use the same items in the menu for many pages, you will probably want to create a separate script file just for initializing the items in the menu, and then include that file on each page that will show the menu.

Create a text file named "initmenu.js" (or any name you prefer). In this file, you'll begin by creating a Menu object, like this:

	var mMenu = new Menu();

At this point, you can either begin setting properties to affect the overall display of the menu, or you can begin adding items to the menu. Let's begin by adding items to the menu.

To create a Link item, use the CreateLink method of the main Menu object, like this:

	var mMenuA = oMenu1.CreateLink();
	mMenuA.displayHtml = "Contoso Home";
	mMenuA.href = "http://www.contoso.com";
	mMenu.AddItem(MenuA);

Once the Link object is created, add it to a menu with the AddItem method of the Menu.

To create an Action item, use the CreateAction method of the main Menu object, like this:

	var mMenuB = oMenu1.CreateAction();
	mMenuB.displayHtml = "Action B";
	mMenuB.action = "window.alert('Action B clicked');";
	mMenu.AddItem(mMenuB);

Once the Action object is created, add it to a menu with the AddItem method of the Menu, just like with a Link item.

To create a child Menu item, use the CreateMenu method of the main Menu object, like this:

	var mMenuC = oMenu1.CreateMenu();
	mMenuC.displayHtml = "Menu C";
	mMenu.AddItem(mMenuC);

Once the Menu object is created, add it to a menu with the AddItem method of the Menu, just like with Link and Action items.

To add more Link items, Action items, and more child Menu items to a child Menu object, use the child menu's AddItem method, like this:

	var mMenuC_1 = oMenu1.CreateLink();
	mMenuC_1.displayHtml = "Feedback";
	mMenuC_1.href = "http://www.contoso.com/contact/";
	mMenuC.AddItem(mMenuC_1);

This adds a Link item to the child menu mMenuC, which was already added to the menu Menu object, mMenu.

Now that you have added all of the items you want to the main Menu object, save and close the file initmenu.js.

For each page with the menu

There is one required file: menu.js. Include it on each page that will show the menu, like this:

	<script src="menu.js" type="text/javascript"></script>

Next include the file you just created to initialize the menu, like this:

	<script src="initmenu.js" type="text/javascript"></script>

Finally, at the location where you want the menu to appear, call the main Menu object's Render method, like this:

	<script type="text/javascript" language="javascript">
		mMenu.Render();
	</script>

That's all it takes to display the menu on each page.

The additional features available for the Menu object are listed in the Reference section.

Reference

There are four objects that comprise Fly-out Menus. The primary object is the Menu object. The other three objects make up all of the items that are visible on the Menu: Link, Action, and child Menu objects.

Menu object

This is the primary object, and is used for rendering the menu on the page. Child items inherit property values from the Menu object if they don't have specific settings.

Properties

This object has no public properties.

Methods

Link object

Properties

Methods

Action object

Properties

Methods

Child Menu object

Properties

Methods

Remarks

Setting dynamic styles

Because the menu displays all menu items using text, the cursor will be an I-beam when moved over a menu. Most users expect to see either an arrow (pointer) cursor or a hand cursor when placing the cursor on a menu. The Menu object sets the default dynamic styles to show a hand cursor for items over which the cursor is hovering, unless that item has been highlighted, in which case an arrow cursor is shown.

If you call the SetDynamicStyles method on a child menu item, those settings are used instead of the top-level Menu item.

Unlike other samples, the Menu sample does not use CSS style class names. Instead, you set the styles you want directly using the SetMenuStyle and SetDynamicStyles methods. You do not have to call SetMenuStyle or SetDynamicStyles on every menu item, but only on those items that you want to appear different than their parent items. If you were to use CSS style class names, you would have to keep careful track of which class names you need to use with each menu item. For a menu with many different styles, you may have difficulty keeping track of class names to the styles strings they represent. By using style property strings directly, and thanks to the way menu items inherit from their parents, you can avoid duplicating common style settings throughout a menu while still having the ability to set unique styles on each item.

Creating chrome images

Chrome images as simply the smallest necessary images required to create an artistic border around a rectangle. There are eight images; one for each corner and one for each side of the rectangle.

The simplest way to create set of chrome images is to start with a graphic of a rectangle that already has the border effect you want. Many graphics programs easily make these type of bordered rectangles. We'll start with this image of a blue rectangle with raised beveled edges, created using a popular graphics application:

When creating images like this, keep rounded corners small, as they determine the margins within the rectangle where text can be drawn. The figure below shows lines that separate the corners from the edges:

If the corners were rounded any more than this, the inner area that can be used for text (the square within the white lines) will get smaller, and the borders will get thicker.

With your graphics program, cut out the four corners of the graphic and save them as separate files. The widths of both left corners must be equal, as well as the widths of both right corners, although the width of the left corners do not have to be equal to the width of the right corners. You should have four files that look like these (magnified 10x, and placed on a silver background so that you can see which pixels are transparent):

top left		bottom left		top right		bottom right

The Menu sample depends on the browser to automatically stretch and resize these images to fit along the actual border around your menu items, so you only need to provide images that are one pixel across by however many pixels it takes to match the size of the two adjacent corners.

The thinly spaced double lines crossing the center of the rectangle horizontally and vertically, along with the corner lines, show the size of the images needed along the borders. Cut out four images from along each edge, and save them as separate files. You should have four files that look like these (magnified 10x):

top		left		right		bottom

When put all together (without any stretching or resizing), the chrome border looks like this (magnified 10x):

Notice that the center of the image is not used. It is up to you to specify background colors for internally placed menu items using CSS in the SetDynamicStyles method.

As previously stated, the Menu sample depends on the browser to resize the edge images. When stretched, the edges will appear something like this:

This provides a stretchable, resizable border around your menu.

Note: if the left and right edges of the your menu do not stretch far enough, it could be because your browser does not vertically stretch the left and right images enough. The way to deal with this problem is to use the SetSize method of the menu, and make sure that the text within each menu item can be displayed on a single line within that size.

Customization

The possibilities for customizations are endless. The source code itself (in menu.js) provides the best documentation for the construction and implementation of the Menu objects, and should be consulted for any customization you might wish to do.

Terms of Use