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 II (keyboard controlled)

 Author: Dynamic Drive

Description: A keyboard-controlled menu bar that slides open/contracts with the press of a key. "x" is the key that will expand the menu, whereas "z" is the key that contracts it. Browsers other than NS 4+ and IE 4+ will simply see nothing.

Demo: (Press "x" to expand the menu, "z" to contract it)


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 determines the spacing between each line of text in the menu.

Enjoy!