首页 > 科技 >

JavaScript如何制作下拉菜单 下拉菜单制作步骤

时间：2022-05-12 16:38:02 来源： PHP中文网

JavaScript制作下拉菜单的方法：1、利用value属性获取下拉菜单的选项;2、根据选项决定div的状态;3、利用style.display样式隐藏或显示div即可。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

JavaScript如何制作下拉菜单?

js下拉菜单制作

一、用js通过下拉菜单来实现div的隐藏和显示

思路：利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下：

代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>W3Cschool(w3cschool.cn)</title>

</head>

<body>

<select id="test_select">

<option value="1">显示</option>

<option value="2">隐藏</option>

</select>

<div id="test">我是一个div么呀我是一个div</div>

<script>

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";

}

}

</script>

</body>

</html>

 

效果演示

二、鼠标滑过出现下拉菜单的js做法

大致思路如下：先给菜单box定好宽高加上position:relative;再给里面的内容定上与之相同的宽高;然后给里面的下拉 二级菜单加上宽度绝对定位。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>W3Cschool(w3cschool.cn)</title>

<style>

* {

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;

}

</style>

</head>

<body>

<ul>

<li>

<a href="javascript：;">下拉</a>

<ul>

<li><a href="javascript：;">下拉1</a></li>

<li><a href="javascript：;">下拉2</a></li>

<li><a href="javascript：;">下拉3</a></li>

<li><a href="javascript：;">下拉4</a></li>

</ul>

</li>

</ul>

<script>

var lis = document.querySelector('.nav').children;

for (var i = 0; i < lis.length; i++) {

lis[i].onmouseover = function () {

this.children[i].style.display = 'block';

}

lis[i].onmouseout = function () {

this.children[i].style.display = 'none';

}

}

</script>

</body>

</html>

 

精彩推荐

阅读排行

要闻

河南疫情防控新要求： 构建步行15

延期近俩月！2022年河南省考何时开

河南没有发现小麦青贮情况 将加强

头条

商业

网站简介 网站团队 本网动态 友情链接 版权声明 我要投稿

Copyright© 2014-2020 中原网视台(www.hnmdtv.com) All rights reserved.