js floating layer menu collection_navigation menu

Instructions for use
Just reference the JS files and CSS files in the attachment to the web page, such as:

Copy code The code is as follows:

Online demohttp://img.jb51.net/online/DivMenu/DivMenu.htm
Download the source code packagehttp://img.jb51.net/online/DivMenu/DivMenu.zip
Among them, DivMenu.js is a streamlined version compressed by Javascript compressor for actual use. DivMenu_develop.js is a development version with detailed annotations for learning and research. When using it, you can refer to the comments in the DivMenu.css file and modify the style definition yourself.
The JavaScript program has been implemented as unobtrusive, that is, the HTML file that references this JS file does not need any other adjustments. However, it has not yet achieved complete anonymity, which means that this program still creates global variables and several web page nodes. It has tried to add as few global variables and nodes as possible, but please still pay attention to variable naming conflicts when using it. This program only adds one global variable "DivMenu", which adds a lot of web page nodes. Two nodes are added for each replaced SELECT node. The names are the name value of the SELECT node plus the "_a" suffix and the "_div" suffix. For example, the original name of a SELECT node is "menu", and the names of the two new nodes are "menu_a" and "menu_div".
Function description
Multi-select menus are not converted, and the prompt text in the multi-select menu can only be realized with disabled="disabled". To select multiple, please hold down the Ctrl key and select Multi-select 1 Multi-select 2 Multi-select 3 Multi-select 4 Multi-select 5 Put a multi-select menu to demonstrate that the multi-select menu will not be replaced and that the layer will be floating in IE6 It can be displayed normally on other SELECTs.
The above is a practical example, several groups of classic SELECT selection menus. The first one is complex with grouping, and the prompt text is implemented with the first option of disabled="disabled". The latter one is simple, and the prompt text is implemented with is the option without a value attribute. Practice has found that FF can normally handle disabled="disabled" or only disabled options, making it non-selectable, while IE ignores any disabled="disabled" and disabled, so it is estimated that menus in IE usually use prompt text. Use the option without value attribute or value="". You can see that its source code is the original SELECT and does not require any changes.
The basic idea is to convert the original SELECT menu in the document into a hidden INPUT form item, use A elements to make the menu's prompt text bar and option bar, use DIV layers to make the menu, and use A elements to replace each option , assign the value to the hidden INPUT form item when clicked.
Main features or limitations include:
All usage habits follow the traditional SELECT menu.
Only the single-select SELECT menu will be replaced, and the multi-select menu will remain unchanged, because usually multi-select menus are not replaced by floating menus.
Supports various SELECT element features, such as using disabled or valueless options as prompt text strips; options grouped with optgroup will also be grouped in the new menu. And it has been specially corrected for the BUG in IE 6 that SELECT blocks the DIV layer.
Supports default selected items.
Almost all functions of the ordinary menu are supported, but additional interactive functions are not supported, such as Option options created by JavaScript in real time, linkage options, etc. For example, functions such as selecting a city, district, and county will change accordingly are not supported.
All styles are defined with CSS, and font sizes use relative sizes, which can be adapted to most web pages without modification.
The menu position and size are set to be flexible and can adapt to any web page layout and layout. When doing it, the consideration was to be able to accommodate the widest option text when displayed in the replaced A element, so the width of the original SELECT box was not directly taken. Therefore, the menu size may be wider than the original SELECT, please pay attention when using it.
Welcome to try it out and provide comments and suggestions to share and discuss improvements.