Categories:

Home / Free JavaScripts / Menu and redirection / Here

Cut & Paste CSS Vertical List Menu

Credit: JavaScript Kit

Note: Modified March 29th, 08. Fixed IE7 drop down issue (only .css file updated).

Description: This is a lean CSS vertical menu. The markup is entirely based on an ordinary HTML list, with support for 1 level of nested lists. The nested lists are transformed into 2nd level drop down menus that appears dynamically onmouseover. The entire menu interface is styled via the external CSS, even the arrow image that appears automatically beside menu items that carry a 2nd level. Enjoy!

See also: CSS Horizontal List Menu

Example:

Directions:

Step 1: Add the following code to the <head> section of your page:

It references two external files and 3 images. Download them below (right click, and select "save as"):

Step 2: Add the below HTML to your page, which contain your menu links:

That's it! You may want to take a peek inside cssverticalmenu.js for optional subtle tweaks to the menu.


JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.