利用jQuery做的导航条菜单

Html代码  

1. <div id="content"></div>  
2. <div id="menu_bar">  
3.     <dl class="menu">  
4.         <dt><span>文件管理</span></dt>  
5.         <dd class="menuItem"><a href="#" class="menu_href">打开文件</a></dd>  
6.         <dd class="menuItem"><a href="#" class="menu_href">删除文件</a></dd>  
7.         <dd class="menuItem"><a href="#" class="menu_href">存储文件</a></dd>  
8.         <dd class="menuItem"><a href="#" class="menu_href">关闭文件</a></dd>  
9.         <dd class="menuItem"><a href="#" class="menu_href">退出</a></dd>  
10.     </dl>  
11.     <dl class="menu">  
12.         <dt><span>编辑</span></dt>  
13.         <dd class="menuItem"><a href="#" class="menu_href">重复操作</a></dd>  
14.         <dd class="menuItem"><a href="#" class="menu_href">撤销操作</a></dd>  
15.         <dd class="menuItem"><a href="#" class="menu_href">拷贝</a></dd>  
16.         <dd class="menuItem"><a href="#" class="menu_href">粘贴</a></dd>  
17.     </dl>                   
18. </div>  

 

Css代码  

1. *{  
2.             padding: 0px;  
3.             margin: 0px;  
4.             font-size:12px;  
5.         }  
6.         #menu_bar {  
7.             position: absolute;  
8.             left:50px;  
9.             top:50px;  
10.         }  
11.         dl.menu {  
12.             float:left;  
13.             width:120px;  
14.         }  
15.         dl.menu dt {  
16.             height:30px;  
17.             background: #339;  
18.             color:#fff;  
19.             border-right:#ffffff 1px solid;  
20.             text-align: center;  
21.         }  
22.         dl.menu dt span {  
23.             position: relative;  
24.             top:6px;  
25.         }  
26.         dd.menuItem {  
27.             background: #911;  
28.             color:#fff;  
29.             border-bottom:#ffffff 1px solid;  
30.             display: none;  
31.             cursor:pointer;  
32.             height:30px;  
33.             border-right:#ffffff 1px solid;  
34.             text-align: center;  
35.         }  
36.         dl.menu dd a {  
37.             position: relative;  
38.             top:6px;  
39.         }  
40.         a.menu_href:link,a.menu_href:visited {  
41.             text-decoration: none;  
42.             color:#fff;  
43.         }  
44.         dd.hoverClass {  
45.             background:#393;  
46.         }  

 

Js代码  

1. $(function(){  
2.   
3.         $(".menu").hover(function(){  
4.             $(this).find("dd").css("display","block");  
5.         },function(){  
6.             $(this).find("dd").css("display","none");  
7.         });  
8.           
9.         $(".menu dd").hover(itemHover,itemHover);  
10.           
11.         function itemHover() {  
12.             $(this).toggleClass("hoverClass");  
13.         }  
14.     });  

 

   meau项目查看

• 查看图片附件