例题1
竖向点击出现二级菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 .caidan{
8 100px;
9 height:40px;
10 border:1px solid #999;
11 text-align:center;
12 line-height:40px;
13 vertical-align:middle;}
14 .xiang{
15 100px;
16 height:40px;
17 border:1px solid #999;
18 text-align:center;
19 line-height:40px;
20 vertical-align:middle;
21 background-color:#03c;
22 }
23 </style>
24 </head>
25 <body>
26 <div class="caidan" onclick="Xian('erji1')">首</div>
27 <div id="erji1" style="display:none">
28 <div class="xiang">首页1</div>
29 <div class="xiang">首页2</div>
30 <div class="xiang">首页3</div>
31 </div>
32 <div class="caidan" onclick="Xian('erji2')">页</div>
33 <div id="erji2" style="display:none">
34 <div class="xiang">首页1</div>
35 <div class="xiang">首页2</div>
36 <div class="xiang">首页3</div>
37 </div>
38 </body>
39 <script type="text/javascript">
40 function Xian(a)
41 {
42 var erji = document.getElementById(a);
43 if(erji.style.display=="none")
44 {
45 erji.style.display = "block";
46 }
47 else
48 {
49 erji.style.display = "none";
50 }
51 }
52 </script>
53 </html>
例题2
横向鼠标移动出现二级菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 .caidan{
8 100px;
9 height:40px;
10 border:1px; solid #999
11 text-align:center;
12 line-height:40px;
13 vertical-align:middle;}
14 .xiang{
15 100px;
16 height:40px;
17 border:1px solid#999;
18 text-align:center;
19 line-height:40px;
20 vertical-align:middle;
21 background-color:#03c;}
22 #caidan{ 330px;
23 height:40px;
24 border:1px; solid #999
25 text-align:center;
26 line-height:40px;
27 vertical-align:middle;}
28 .yiji{
29 100px;
30 height:40px;
31 float:left;
32 text-align:center;
33 line-height:40px;
34 vertical-align:middle;
35 }
36 </style>
37 </head>
38
39 <body>
40 <div id="caidan">
41 <div class="yiji" onmousemove="Shang('erji1')" onmouseout="Hui('erji1')">首页
42 <div id="erji1" style="display:none">
43 <div class="xiang">首页</div>
44 <div class="xiang">首页</div>
45 <div class="xiang">首页</div>
46 </div>
47
48 </div>
49 <div class="yiji" onmousemove="Shang('erji2')" onmouseout="Hui('erji2')">首页1
50 <div id="erji2" style="display:none">
51 <div class="xiang">首页1</div>
52 <div class="xiang">首页1</div>
53 <div class="xiang">首页1</div>
54 </div>
55 </div>
56 <div class="yiji" onmousemove="Shang('erji3')" onmouseout="Hui('erji3')">首页2
57 <div id="erji3" style="display:none">
58 <div class="xiang">首页2</div>
59 <div class="xiang">首页2</div>
60 <div class="xiang">首页2</div>
61 </div>
62 </div>
63 </div>
64 </body>
65 <script type="text/javascript">
66 function Shang(a)
67 {
68 var erji = document.getElementById(a);
69
70 erji.style.display = "block";
71 }
72 function Hui(a)
73 {
74 var erji = document.getElementById(a);
75 erji.style.display = "none";
76 }
77 </script>
78 </html>
79 </body>
80 </html>
例题3
用div做下拉列表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <style type="text/css">
8 *{
9 margin:0px auto;}
10 #caidan{
11 300px;
12 height:40px;
13 border:1px solid #999;
14 text-align:center;
15 line-height:40px;
16 vertical-align:middle;
17 }
18 .xiang{
19 300px;
20 height:40px;
21 border:1px solid #999;
22 background-color:#0FF;
23 text-align:center;
24 line-height:40px;
25 vertical-align:middle;
26 display:none;
27 }
28 .xiang:hover{
29 color:#fff;
30 background-color:red}*/
31 </style>
32 <body>
33 <div id="caidan" onclick="Xian()">cheng</div>
34 <div class="xiang" onclick="Xuan(this)">北京</div>
35 <div class="xiang" onclick="Xuan(this)">上海</div>
36 <div class="xiang" onclick="Xuan(this)">深圳</div>
37 <div class="xiang" onclick="Xuan(this)">广州</div>
38 <div class="xiang" onclick="Xuan(this)">济南</div>
39 </body>
40 <script type="text/javascript">
41 function Xian()
42 {
43 var div = document.getElementsByClassName("xiang");
44 for(var i=0;i<div.length;i++)
45 {
46 div[i].style.display = "block";
47 }
48 }
49 function Xuan(a)
50 {
51 //var nr = a.innerHTML;
52 document.getElementById("caidan").innerHTML = a.innerHTML;
53 var xiang = document.getElementsByClassName("xiang");
54 for(var i=0;i<xiang.length;i++)
55 {
56 xiang[i].style.display = "none";
57 }
58
59 }
60 </script>
61 </html>
例题4
选项卡
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 *{
8 margin:0px auto;}
9 #ka{
10 320px;
11 height:40px;
12 }
13 .kaming{
14 100px;
15 height:40px;
16 text-align:center;
17 vertical-align:middle;
18 line-height:40px;
19 float:left}
20 .xiang{
21 320px;
22 height:300px;
23 }
24 </style>
25 </head>
26
27 <body>
28 <div id="ka">
29 <div class="kaming" style="background-color:red;" onclick="Xian('xinwen')">新闻</div>
30 <div class="kaming" style="background-color:green;" onclick="Xian('junshi')">军事</div>
31 <div class="kaming" style="background-color:blue;" onclick="Xian('yule')">娱乐</div>
32 </div>
33 <div id="xinwen" class="xiang" style="background-color:red;"></div>
34 <div id="junshi" class="xiang" style="background-color:green; display:none"></div>
35 <div id="yule" class="xiang" style="background-color:blue; display:none"></div>
36 </body>
37
38 </body>
39 <script type="text/javascript">
40 function Xian(a)
41 {
42 var div = document.getElementById(a);
43
44 var xiang = document.getElementsByClassName("xiang");
45 for(var i=0;i<xiang.length;i++)
46 {
47 xiang[i].style.display = "none";
48 }
49
50 div.style.display = "block";
51
52 }
53 </script>
54 </html>