首頁 > web前端 > js教程 > JavaScript實作非常簡單實用的下拉式選單效果_javascript技巧

JavaScript實作非常簡單實用的下拉式選單效果_javascript技巧

WBOY
發布: 2016-05-16 15:42:09
原創
1663 人瀏覽過

本文實例講述了JavaScript實作非常簡單實用的下拉式選單效果。分享給大家供大家參考。具體如下:

這是一款實用的JS下拉選單,滑鼠移上選單就顯示出二級選單,是從其它網站上整理下來的,修改花了不少時間,現在去除了一些無用程式碼,更簡潔了,而且程式碼相容性似乎也表現不錯,這款兩級下拉式選單,基本上是由CSS和JavaScript共同實現的,真的挺簡潔實用。

運作效果截圖如下:

線上示範網址如下:

http://demo.jb51.net/js/2015/js-css-down-show-menu-codes/

具體程式碼如下:

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

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>JavaScript下拉菜单</title>

<style type="text/css">

* {

padding:0;

margin:0;

}

body {

font-family:verdana, sans-serif;

font-size:14px; background-color:#000;

}

#navigation, #navigation li ul {

list-style-type:none;

}

#navigation {

}

#navigation li {

float:left;

text-align:center;

position:relative;

}

#navigation li a:link, #navigation li a:visited {

display:block;

text-decoration:none;

color:#fff;

width:82px;

height:40px;

line-height:40px;

border:1px solid #fff;

border-width:1px 1px 0 0;

background:#255f9e;

padding-left:10px;

}

#navigation li a:hover {

color:#fff;

background:#ffb100;

}

#navigation li ul li a:hover {

color:#fff;

background:#ffb100

}

#navigation li ul {

display:none;

position:absolute;

top:40px;

margin-top:1px;

font-size:12px;

}

</style>

<script type="text/javascript">

function displaySubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];

subMenu.style.display = "block";

}

function hideSubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];

subMenu.style.display = "none";

}

</script>

</head>

<body>

<ul id="navigation">

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">菜单1</a>

<ul>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

<li><a href="#">菜单1</a></li>

</ul>

</li>

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">菜单2</a>

<ul>

<li><a href="#">栏目2</a></li>

<li><a href="#">栏目2</a></li>

<li><a href="#">栏目2</a></li>

<li><a href="#">栏目2</a></li>

<li><a href="#">栏目2</a></li>

</ul>

</li>

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">菜单3</a>

<ul>

<li><a href="#">菜单3</a></li>

<li><a href="#">菜单3</a></li>

<li><a href="#">菜单3</a></li>

<li><a href="#">菜单3</a></li>

<li><a href="#">菜单3</a></li>

</ul>

</li>

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">菜单4</a>

<ul>

<li><a href="#">菜单4</a></li>

<li><a href="#">菜单4</a></li>

<li><a href="#">菜单4</a></li>

<li><a href="#">菜单4</a></li>

<li><a href="#">菜单4</a></li>

</ul>

</li>

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目5</a>

<ul>

<li><a href="#">菜单5</a></li>

<li><a href="#">菜单5</a></li>

<li><a href="#">菜单5</a></li>

<li><a href="#">菜单5</a></li>

<li><a href="#">菜单5</a></li>

</ul>

</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目6</a>

<ul>

<li><a href="#">菜单6</a></li>

<li><a href="#">菜单6</a></li>

<li><a href="#">菜单6</a></li>

<li><a href="#">菜单6</a></li>

<li><a href="#">菜单6</a></li>

</ul>

</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目7</a>

<ul>

<li><a href="#">菜单7</a></li>

<li><a href="#">菜单7</a></li>

<li><a href="#">菜单7</a></li>

<li><a href="#">菜单7</a></li>

<li><a href="#">菜单7</a></li>

</ul>

</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目8</a>

<ul>

<li><a href="#">菜单8</a></li>

<li><a href="#">菜单8</a></li>

<li><a href="#">菜单8</a></li>

<li><a href="#">菜单8</a></li>

<li><a href="#">菜单8</a></li>

</ul>

</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目09</a>

<ul>

<li><a href="#">菜单9</a></li>

<li><a href="#">菜单9</a></li>

<li><a href="#">菜单9</a></li>

<li><a href="#">菜单9</a></li>

<li><a href="#">菜单9</a></li>

</ul>

</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目10</a>

<ul>

<li><a href="#">菜单10</a></li>

<li><a href="#">菜单10</a></li>

<li><a href="#">菜单10</a></li>

<li><a href="#">菜单10</a></li>

<li><a href="#">菜单10</a></li>

</ul>

</li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

<a href="#">栏目11</a>

<ul>

<li><a href="#">菜单11</a></li>

<li><a href="#">菜单11</a></li>

<li><a href="#">菜单11</a></li>

<li><a href="#">菜单11</a></li>

<li><a href="#">菜单11</a></li>

</ul>

</li>

</li>

</ul>

</li>

</ul>

</body>

</html>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板