FF1+ IE5+ Opr7+

Slide-In Menu Bar III (Manually controlled)

 Author: Dynamic Drive

Description: A manually controlled menu bar. Drag the bar to expand or contract it. Browsers other than NS 4+ and IE 4+ will simply see nothing.


Directions Developer's View

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

Select All

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

Select All

Configuring the menu

To change the contents of the menu to your own, edit the sitems[] array. You may now also specify a target for the links, if you wish them to be loaded in a new window or frame.

To change the appearance of the menu, edit the style sheet in Step 1 plus the first few variables listed in script of Step 2. Here's a brief description of the editable parts within the style sheet:

border:1.5px solid green;
font:bold 12px Verdana;

The first line determines the appearance of the border that surrounds the menu (change 1.5px and green as desired). The second and third line effects the background color of the menu. The fourth line determines the font of the menu (change 12px and Verdana as desired). The last line deterines the spacing between each line of text in the menu.