JavaScript Multi-level menu on the web page

zhaozj2021-02-16  52

JavaScript multi-level menu V0.9B

Author: detrox email: detrox@163.net qq: 2721826

Please see the example of the left:

0.9 Edition features:

1. You can display the multi-level menu

2, can define the way of displaying menus by defining fshow functions

3, solve the problem that the relative path cannot be positioned in the script when cooperating with the Dreamweaver Template mechanism

4, you can join the icon on the menu item, support the split line

5. On the menu item with the submenu, ">" is displayed.

How to use: 1, contain menu.js and menu.css

2, use the creation of the main menu class

Main = new mainmenu (10, 50, "My Menu");

Here, the first two parameters of MainMenu indicate the position coordinates of its left upper corner, the former is Left, the latter is TOP. The third parameter is a menu title.

Then use the Menuitem class to build a menu item MenuItem's source type as follows:

Function menuitem (_parent, _caption, _url, _target, _style, _image, _templatepos, _description)

Among them, _parent is the parent menu item, for example:

Item1 = New Menuitem (Main, "Detrox's Page", "http://detrox.yeah.net"

, "_ Blank", NULL, "DETROX.GIF", FALSE, "DETROX's HomePage On Programming");

Established a MAIN menu item, such as

Item2 = New Menuitem (item1, "Detrox's Page", "http://detrox.yeah.net"

, "_ Blank", NULL, "DETROX.GIF", FALSE, "DETROX's HomePage On Programming");

Create a submenu item for Item1

Other parameters:

_CAPTION is the title of the menu item, and the split line can be displayed when _caption is "-". The URL is a location-read-Target-Target-That a Target property of the A-Target _Style to add a special CSS property of the menu item _Image to display the path of the small icon in the menu text _description is menu annotation (same a Title property of the A tag).

Special Note:

_TemplatePOS is used to make a web page with Dreamweaver. When you need to use the Template mechanism, _url needs to be relatively positioned in the web page. Setting_templatepos to True and need to add a positioning label in Dreamweaver's Template:

Display menu:

Finally, the Show () command display menu is displayed. E.g:

Main.show ()

The user can customize the display method of the menu. By defining a FSHOW (ID) function. Function prototype

FSHOW (ID) The ID number of the menu (DIV element) to display when the ID is here. You can control the menu through this ID number. Define MFSHOW (ID) can change the display method of the main menu.

Note:

The arrow icon file name after the menu item with a submenu must be an arrow.gif file, if I provide the arrow color and the do you want to change this file.

CSS style definition:

Define your own menu style, modify menu.css, where

.smenuitem is the style when the menu item is selected .NMenuItem is the menu style when the menu item is not selected. Mnutitle is the title pattern for the main menu .nMenubk is the menu background layer style

Source code: