简单的 Jquery 下拉菜单Demo 

 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>Drop-down menu demo</title>
 6 <script src="js/jquery-1.6.1.min.js"></script>
 7 <style>
 8 *{ padding:0; margin:0;}
 9 body{ font-size:12px; font-family:"宋体", Arial; color:#333; background:#fff; padding:50px;}
10 ul{ list-style:none;}
11 a{ color:#333; text-decoration: none;}
12 .dropMenu{ margin:20px 0;}
13 .dropMenu h3{ width:140px; padding-left:10px; font-size:12px; font-weight:normal; height: 28px; line-height: 28px; background:#f4f4f4; border:1px solid #ddd; cursor: pointer;}
14 /*.dropMenu h3 span{ float:right; background:url(images/dropMenu-btn1.gif) left bottom no-repeat; width:7px; height:7px; position:relative; top:10px; right:10px;}*/
15 .dropMenu h3 span{ float:right; padding:2px 10px 0 0;}
16 .itemList{ width:150px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
17 .itemList li{ padding:8px; border-bottom:1px solid #ddd;}
18 .itemList li a{ display:block;}
19 .itemList li a:hover{ color:#06C; font-weight: bold;}
20 .grey-bg{ background:#f4f4f4;}
21 </style>
22 </head>
23 <!-- ◀▶▼▲-->
24 <body>
25 <h3>简单的 Jquery 下拉菜单</h3>
26     <div class="dropMenu">
27         <h3><span>▼</span>下拉菜单</h3>
28         <ul class="itemList">
29             <li><a href="#">列表一</a></li>
30             <li><a href="#">列表二</a></li>
31             <li><a href="#">列表三</a></li>
32             <li><a href="#">列表四</a></li>
33             <li><a href="#">列表五</a></li>
34             <li><a href="#">列表六</a></li>
35         </ul>
36     </div>
37     <div class="dropMenu">
38         <h3><span>▼</span>下拉菜单</h3>
39         <ul class="itemList">
40             <li><a href="#">列表1</a></li>
41             <li><a href="#">列表2</a></li>
42             <li><a href="#">列表3</a></li>
43             <li><a href="#">列表4</a></li>
44             <li><a href="#">列表5</a></li>
45             <li><a href="#">列表6</a></li>
46         </ul>
47     </div>
48     <script>
49         $(function(){
50             //$('.itemList li:odd').addClass('grey-bg');
51             $('.itemList li:odd').css('background','#f4f4f4');
52             $('.dropMenu h3').click(function(){
53                 $(this).next('.itemList').slideToggle(300);
54             });
55             $('.itemList > li > a').hover(function(){
56                 $(this).stop().animate({paddingLeft:'20px'},200);    
57             },function(){
58                 $(this).stop().animate({paddingLeft:'0px'},100);    
59             });    
60         });
61     </script>
62 </body>
63 </html>

 

posted @ 2014-04-01 15:14  波克比520  阅读(173)  评论(0)    收藏  举报