Cut & Paste Flip Menu (v 5.0)
|
Description: Flip Menu creates a collapsible menu tree out of an ordinary HTML list! It consists of just one external .js file, in which you specify settings such as whether to persistence the menu state (using cookies), the images used to replace the default list bullets, and if any previously open branches should be closed when the current one is open. Very nice.
Example:
Directions:
Step 1: Add the following code to the <head> section of your page:
The above code requires the following files (download by right clicking each link, and select "Save As" into the same directory as your page):
- flipmenu.js
,
,
,
Step 2: Add the below sample HTML list to your page:
The HTML for the script should merely be a regular HTML list
with a class="flipMenu" declaration. Inside
flipmenu.js, you can configure the following variables:
// ## Degree of indentation from the left.
flipIndentation = "5px";
// ## Padding inbetween menu items.
flipVerticalPadding = "4px";
// ## Margin between the left of the browser and the menu.
flipLeftMargin = "16px";
// ## Margin between the top of the browser and the menu.
flipTopMargin = "10px";
// ## Allow multiple menus to fold out without closing all the other open ones.
flipOpenMultipleMenus = false;
// ## Preserve the current state of the menu (requires cookies).
flipSaveMenuState = true;
// ## Use custom images for bullets
flipImages = true;
// ## Images to use (specify full path)
flipImg_open = "flip_open.gif";
flipImg_closed = "flip_closed.gif";
flipImg_static = "flip_static.gif";
// ## Initialise all flipMenus onload
flipInitOnLoad = true;
// ## Message to display in status bar while loading
flipLoadingMessage = "Loading...";