JQ-下拉菜单 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *
 8         {
 9             margin: 0;
10             padding: 0;
11         }
12         #con
13         {
14             list-style: none;
15             width: 600px;
16             margin: 50px auto;
17         }
18         #con:after
19         {
20             content: "";
21             display: block;
22             clear: both;
23         }
24         #con li
25         {
26             float: left;
27             width: 99px;
28             height: 50px;
29             border-right: 1px solid red;
30             background: #ccc;
31             position: relative;
32         }
33         #con span
34         {
35             line-height: 50px;
36             text-align: center;
37             display: block;
38         }
39         #con div
40         {
41             width: 99px;
42             position: absolute;
43             left: 0px;
44             top: 50px;
45             text-align: center;
46             display: none;
47             background: green;
48         }
49     </style>
50 </head>
51 <body>
52     <ul id="con">
53         <li><span>酒店</span><div>酒店内容</div></li>
54         <li><span>景点</span><div>景点内容</div></li>
55         <li><span>路线</span><div>路线内容</div></li>
56         <li><span>价格</span><div>价格内容</div></li>
57         <li><span>美食</span><div>美食内容</div></li>
58         <li><span>折扣</span><div>折扣内容</div></li>
59     </ul>
60     <script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
61     <script src="jquery.easing.min.js" type="text/javascript" charset="utf-8"></script>
62     <script>
63     $(function() {
64         $('#con li').mouseover(function() {
65             var i=$(this).index('li');
66             $('#con li').eq(i).css({'background':'orange','color':'#fff'});
67             $('#con li div').eq(i).show().stop().animate({'height':'400px'},1500,'easeOutBack');
68         })
69         $('#con li').mouseout(function() {
70             var i=$(this).index('li');
71             $('#con li').eq(i).css({'background':'#ccc','color':'black'});
72             $('#con li div').eq(i).stop().animate({'height':'0px'},1500,'easeOutBack',function() {
73                 $('#con li div').hide();
74             })
75         })
76     })
77     </script>
78 </body>
79 </html>

 

posted @ 2016-09-16 14:48  舍近求猿  阅读(206)  评论(0)    收藏  举报