Js floating-layer menu favorites

Instructions for use
That is, you only need to reference the JS and CSS files in the attachment to the webpage, for example:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "DivMenu. js"> </script>
<Link href = "DivMenu.css" rel = "stylesheet" type = "text/css"/>

Online Demo http://img.jb51.net/online/DivMenu/DivMenu.htm
Download source package http://img.jb51.net/online/DivMenu/DivMenu.zip
DivMenu. js is a simplified version compressed by Javascript compressor for actual use. DivMenu_develop.js is a development version with detailed notes for study. You can modify the style definition by referring to the annotations in the DivMenu.css file.
The JavaScript program has implemented unobtrusive, that is, the HTML file that references this JS file does not need any other adjustments. However, full anonymity is not yet implemented, which means that the program still creates global variables and a number of webpage nodes, so we have tried to add as few global variables and nodes as possible, note the variable name conflict during use. This program only adds one global variable "DivMenu". There are more webpage nodes added, and two nodes are added for each selected node that is replaced, the names are respectively the name value of the SELECT node plus the suffix "_ a" and the suffix "_ div". For example, the name of an original SELECT node is "menu ", the two newly added nodes are named "menu_a" and "menu_div ".
Function Description
The multi-Select menu is not converted. The prompt text in the Multi-Select menu can only be implemented using disabled = "disabled. If you want to select multiple menus, press Ctrl to select multiple menus, select one, select two, choose three, choose four, choose five, and then select one menu to demonstrate that multiple menus will not be replaced, in IE6, the floating layer can be normally displayed in other SELECT statements.
The above is a practical example. There are several classic SELECT menus. The first one is complex with grouping, and the prompt text is implemented using the first option of disabled = "disabled, the last one is simple, and the prompt text uses the option without the value attribute. In practice, it is found that FF can normally process disabled = "disabled" or only disabled options, so that it is not available, while IE ignores any disabled = "disabled" and disabled, therefore, it is estimated that the option with no value attribute or value = "" will be used for the menus in IE. The source code is the original SELECT statement without any changes.
The basic idea is to convert the original SELECT menu in the document into A hidden INPUT form item, use element A as the prompt text bar and option bar of the menu, and use the DIV layer as the menu, each option is also replaced by element A. when clicked, the value is assigned to the hidden INPUT form item.
Main functions or restrictions include:
All usage habits follow the traditional SELECT menu.
Only the SELECT menu of a single choice will be replaced, and the multi-choice menu will remain unchanged, because the multi-choice menu usually does not need to be replaced by a floating-layer menu.
Supports the features of various SELECT elements, such as the option with disabled or no value as the prompt text bar; the option with optgroup is also grouped in the new menu. In addition, the BUG that SELECT blocks the DIV layer in IE 6 is fixed.
Supports selected items by default.
Almost all functions of common menus are supported, but additional interaction functions are not supported, such as Option options and linkage options created in JavaScript in real time, for example, selecting a city or a district will change accordingly. This type of function is not supported.
All styles are defined by CSS, And the font size is relative. You can use them for most web pages without any changes.
The menu position and size are set flexibly to adapt to any web page layout and layout. In this case, the widest option text should be placed when the alternative A element is displayed, so the width of the original SELECT box is not directly obtained. Therefore, the menu size may be wider than that of the original SELECT statement.
You are welcome to try it out and provide suggestions for further improvement.