FF1+ IE5+ Opr7+

Fold-out external menu

 Author: Dynamic Drive

Description: A cool menu bar that automatically slides open from the left edge of the screen as the surfer moves the mouse over it. Moving the mouse out will cause it the bar to slide back in. The menu uses an external page as its content to display. This allows you to configure the menu simply by editing the external file, through HTML.

Demo: Move your mouse over the menu on your left!


Directions Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

Step 2: Insert the following into the <body> section of your page, right after the <body> tag itself:

Select All

The above code references the HTML file "menu.htm" as the menu to be displayed. You can change that reference to your own menu's file name. Just change the relevant variable inside code of Step 2.

Configuring the menu (must read)

As mentioned above, the menu itself is an external HTML file, which makes configuring the contents of the menu a snap. Create the menu file as you would with any other HTML document- using text, graphics, etc. Then, save it as "menu.htm" For example, this is the menu file used in the demo (when you move the mouse over this document in IE 4, an error occurs. This is normal). After that, there are two things you need to do to menu.htm.

First, add the following code inside the <body> tag itself of menu.htm:

<body onMouseover="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.pull()"
onMouseout="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.draw()">

Finally, for all the links inside the menu, you need to add the code

target="_parent"

inside the <a> tags, so the links gets loaded in the main document itself (as opposed to inside the menu).

If this is confusing, just view the source of the menu file!

You're done!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post