Home / Free JavaScripts / Menu and redirection / Here

Cut & Paste Flip Menu (v 5.0)

Credit: Osem Websystems

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.



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):

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...";

JavaScript Tools:
Site Info

CopyRight (c) 2015 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info