New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Slide-In Menu Bar I

 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 the bar to slide back in. Browsers other than NS 4+ and IE 4+ will simply see nothing.

Demo: Look to the left of you.


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;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;

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.

Enjoy!