How to make drop-down menus by JavaScript

This article mainly explains "how to make a drop-down menu in JavaScript". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to make a drop-down menu with JavaScript.

The method of making pull-down menu by JavaScript: 1, using the value attribute to obtain the options of the drop-down menu; 2, determining the state of the div according to the option; 3, using the style.display style to hide or show the div.

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

How does JavaScript make drop-down menus?

Production of js drop-down menu

1. Use js to hide and display div through the drop-down menu

Idea: use the value property to get the options for the drop-down menu → determines the status of the div based on the option → hides or displays the div using the style.display style. The example is shown as follows:

Code

W3Cschool (w3cschool.cn) shows that I am a div. Am I a div _ window.onload = function () {var obj_select = document.getElementById ("test_select"); var obj_div = document.getElementById ("test"); obj_select.onchange = function () {obj_div.style.display = this.value = = 1? "block": "none";}

Effect demonstration

2. Js practice when mouse over and drop-down menu appears.

The general idea is as follows: first set the width and height of the menu box and then add the same width and height to the contents of the menu, and then add the absolute width orientation to the drop-down secondary menu inside.

W3Cschool (w3cschool.cn) * {margin: 0; padding: 0;} li {list-style-type: none;} a {text-decoration: none; font-size: 14px;} .nav {margin: 100px;} .nav > li {position: relative; float: left; width: 80px; height: 41px; text-align: center } .nav li a {display: block; width: 100%; height: 100%; line-height: 41px; color: # 333;} .nav > li > a:hover {background-color: # eee;} .nav ul {display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid # FECC5B Border-right: 1px solid # FECC5B;} .nav ul li {border-bottom: 1px solid # FECC5B;} .nav ul li a:hover {background-color: # FFF5DA;} pull down 1 pull down 2 pull 3 pull down 4 var lis = document.querySelector ('.nav') .children For (var I = 0; I < lis.length; iTunes +) {lis.onmouseover = function () {this.children.style.display = 'block';} lis.onmouseout = function () {this.children.style.display =' none' }} at this point, I believe you have a deeper understanding of "how JavaScript makes drop-down menus". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!