javascript:下拉菜单特效

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30663391

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/51xzdy/archive/2012/06/15/2550476.html

本文介绍了一种使用CSS实现的下拉菜单效果，通过:hover伪类改变菜单高度，并为菜单项添加了背景颜色变化的交互效果。文章还展示了如何使用JavaScript初始化页面链接及响应鼠标事件。

 1 <html>
 2 <head>
 3 <title>1</title>
 4 <style type='text/css'>
 5 #box{
 6 
 7 }
 8 #link_menu{
 9     display:block;
10     float:right;
11     /*visibility:hidden;*/
12     overflow:hidden;
13     height:18px;
14     text-decoration:none;
15 }
16 #link_menu:hover{
17     height:218px;
18 }
19 #link_menu:visited{
20     color:#333333;
21 }
22 #ul_menu{
23     margin:0px;
24     list-style-type:none;
25     width:120px;
26     height:200px;
27     border:solid 1px green;
28 }
29 #ul_menu li{
30     padding-left:15px;
31     line-height:25px;
32     font-size:14px;
33     color:#333333;
34     border-bottom:dashed 1px #aaaaaa;
35     cursor:pointer;
36 }
37 #ul_menu li a{
38     
39 }
40 </style>
41 </head>
42 <body>
43 <a id='link_menu'>
44 <span>jacky</span>
45 <ul id='ul_menu'>
46 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项1</li>
47 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项12</li>
48 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项13</li>
49 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项14</li>
50 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项15</li>
51 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项14</li>
52 <li onclick="fun();" onmousedown="fun2();" onmouseover="fun3(this);" onmouseout="fun4(this);">链接项15</li>
53 <ul>
54 </a>
55 <script language='javascript'>
56     window.onload=function(){
57         temp=object.href;
58         object.href='6-28.html';
59     }
60     var object=document.getElementById('link_menu');
61     var temp;
62     function fun(){
63         location.href='6-29.html';
64     }
65     function fun2(){
66         object.href=temp;
67     }
68     function fun3(obj){
69         obj.style.backgroundColor='lightgreen';
70     }
71     function fun4(obj){
72         obj.style.backgroundColor='white';
73     }
74 </script>
75 
76 </body>
77 </html>