[JavaScript] Use onmousemove and onmouseout events to create a drop-down menu that is compatible with IE6 pure javascript and has no plug-in.

[JavaScript] Use onmousemove and onmouseout events to create a drop-down menu that is compatible with IE6 pure javascript and has no plug-in.

The drop-down menu is available in many front-end frameworks and can be used directly. However, the drop-down menu in the framework is difficult to modify and may also have compatibility problems.

In fact, this thing can be fully implemented using HTML + CSS + Javascript.

The effect is as follows:

The basic idea is as follows:

The first is the layout of HTML and CSS. First, a table is arranged. There are two rows in the table, one row put down the pull button, and one row put down the pull menu, occupying 100% of the total width, the spacing between cells is 0.

Because each of the five elements occupies 20%.

The layout of div float is not used here because the drop-down menu group is very well controlled if table is used here. There is no need to worry about the location of the drop-down button corresponding to the drop-down menu, as well as the coordinates of the corresponding drop-down menu.

The drop-down menu corresponding to the drop-down button is hidden at the beginning. If you place the cursor over the drop-down menu and the drop-down button, call the following javascript to display the drop-down menu events. The onmousemove event actually works as well.

If you move the mouse away from the table that contains the drop-down menu, use the onmouseout event.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> This is followed by the script. Like [JavaScript] IMG, which is originally compatible with Internet Explorer 6 (click to open the link), document is used first. getElementById ("dropdown "). getElementsByTagName ("div"); obtain all div nodes of the table id = dropdown to form an array. The showname parameter indicates the showname div under the table id = dropdown. Corresponds to the drop-down menu. Then, traverse all div nodes and hide all the div except the div with the showname.

The dropdown_dismiss function is used when the mouse leaves the table. This function hides all Divs.

<script>function dropdown_show(showname){var dropdownArr=document.getElementById("dropdown").getElementsByTagName("div");for(var i=0;i<dropdownArr.length;i++){  if(i==showname){dropdownArr[i].style.display="block";  }  else{  dropdownArr[i].style.display="none";   }  } }function dropdown_dismiss(){var dropdownArr=document.getElementById("dropdown").getElementsByTagName("div");for(var i=0;i<dropdownArr.length;i++){  dropdownArr[i].style.display="none"; }}</script>