Instructions for use
That is, you only need to refer to the JS file and CSS file in the attachment to the web page, such as:
<script type="text/javascript" src=""></script>
<link href="" rel="stylesheet" type="text/css" />
Online Demohttp://img./online/DivMenu/
Download source code to packagehttp://img./online/DivMenu/
Among them is a thin 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 file and modify the style definition yourself.
The JavaScript program has implemented unobtrusive, that is, the HTML file that references this JS file without any other adjustments. However, it has not yet been fully anonymous, which means that this program still creates global variables and several web page nodes. It has tried to add global variables and nodes as little as possible, but please pay attention to variable naming conflicts when using them. This program only adds one global variable "DivMenu", and there are many added web page nodes. For each replaced SELECT node, two nodes are added, name is the name value of the SELECT node plus the suffix of the "_a" and the suffix of the "_div" respectively. For example, if the original SELECT node is "menu", then the two newly added node names are "menu_a" and "menu_div".
Function description
The multi-select menu does not convert, and the prompt text in the multi-select menu can only be implemented with disabled="disabled". To select multiple, please hold the Ctrl key and select Multiple Select 1 Multiple Select 2 Multiple Select 3 Multiple Select 4 Multiple Select 5 Put a multiple Select menu to demonstrate that the multiple Select menu will not be replaced, and that in IE6, the floating layer can be displayed normally above other SELECTs.
The above is a practical example, several sets of classic SELECT selection menus. The first one is complex and grouped. The prompt text is implemented with the first option of disabled="disabled" and the latter one is simple. The prompt text is used with the option without the value attribute. Practice has found that FF can handle disabled="disabled" or only disabled options normally, so that it can be unselectable, while IE ignores any disabled="disabled" and disabled, so it is estimated that usually the menu in IE will use the option without the value attribute or value="". You can see that its source code is the original SELECT and no changes are required.
The basic idea is to convert the original SELECT menu in the document into a hidden INPUT form item, use the A element to make the menu prompt text and option bars, use the DIV layer to make the menu, and each option is also replaced by the A element. When clicking, assign the value to the hidden INPUT form item.
Key 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 remains unchanged, because the multi-select menu is usually not replaced by the floating layer menu.
Supports various SELECT elements features, such as using disabled or no value option as prompt text; options grouped with optgroup will also be grouped in the new menu. It has also been specifically corrected for the bugs that block the DIV layer in IE 6.
Supports default selections.
Almost all functions of ordinary menus are supported, but additional interactive functions are not supported, such as Option options, linkage options, etc. created in real time in JavaScript. For example, if you choose a city, district and county, you will change accordingly, you will not support functions such as this.
All styles are defined in CSS, and the font size uses relative sizes, so you can adapt to most web pages without any changes.
The menu position and size are set to be flexible to adapt to any web page layout and layout. When doing it, consider that when displaying it in the alternative A element, you can put the widest option text, so you do not directly take the width of the original SELECT box. Therefore, the menu size may be wider than the original SELECT, please pay attention when using it.
Welcome to try out, and put forward opinions and suggestions, and share discussions and improvements.
That is, you only need to refer to the JS file and CSS file in the attachment to the web page, such as:
Copy the codeThe code is as follows:
<script type="text/javascript" src=""></script>
<link href="" rel="stylesheet" type="text/css" />
Online Demohttp://img./online/DivMenu/
Download source code to packagehttp://img./online/DivMenu/
Among them is a thin 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 file and modify the style definition yourself.
The JavaScript program has implemented unobtrusive, that is, the HTML file that references this JS file without any other adjustments. However, it has not yet been fully anonymous, which means that this program still creates global variables and several web page nodes. It has tried to add global variables and nodes as little as possible, but please pay attention to variable naming conflicts when using them. This program only adds one global variable "DivMenu", and there are many added web page nodes. For each replaced SELECT node, two nodes are added, name is the name value of the SELECT node plus the suffix of the "_a" and the suffix of the "_div" respectively. For example, if the original SELECT node is "menu", then the two newly added node names are "menu_a" and "menu_div".
Function description
The multi-select menu does not convert, and the prompt text in the multi-select menu can only be implemented with disabled="disabled". To select multiple, please hold the Ctrl key and select Multiple Select 1 Multiple Select 2 Multiple Select 3 Multiple Select 4 Multiple Select 5 Put a multiple Select menu to demonstrate that the multiple Select menu will not be replaced, and that in IE6, the floating layer can be displayed normally above other SELECTs.
The above is a practical example, several sets of classic SELECT selection menus. The first one is complex and grouped. The prompt text is implemented with the first option of disabled="disabled" and the latter one is simple. The prompt text is used with the option without the value attribute. Practice has found that FF can handle disabled="disabled" or only disabled options normally, so that it can be unselectable, while IE ignores any disabled="disabled" and disabled, so it is estimated that usually the menu in IE will use the option without the value attribute or value="". You can see that its source code is the original SELECT and no changes are required.
The basic idea is to convert the original SELECT menu in the document into a hidden INPUT form item, use the A element to make the menu prompt text and option bars, use the DIV layer to make the menu, and each option is also replaced by the A element. When clicking, assign the value to the hidden INPUT form item.
Key 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 remains unchanged, because the multi-select menu is usually not replaced by the floating layer menu.
Supports various SELECT elements features, such as using disabled or no value option as prompt text; options grouped with optgroup will also be grouped in the new menu. It has also been specifically corrected for the bugs that block the DIV layer in IE 6.
Supports default selections.
Almost all functions of ordinary menus are supported, but additional interactive functions are not supported, such as Option options, linkage options, etc. created in real time in JavaScript. For example, if you choose a city, district and county, you will change accordingly, you will not support functions such as this.
All styles are defined in CSS, and the font size uses relative sizes, so you can adapt to most web pages without any changes.
The menu position and size are set to be flexible to adapt to any web page layout and layout. When doing it, consider that when displaying it in the alternative A element, you can put the widest option text, so you do not directly take the width of the original SELECT box. Therefore, the menu size may be wider than the original SELECT, please pay attention when using it.
Welcome to try out, and put forward opinions and suggestions, and share discussions and improvements.