首页 > 代码库 > JQ-下拉菜单
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 #con13 {14 list-style: none;15 width: 600px;16 margin: 50px auto;17 }18 #con:after19 {20 content: "";21 display: block;22 clear: both;23 }24 #con li25 {26 float: left;27 width: 99px;28 height: 50px;29 border-right: 1px solid red;30 background: #ccc;31 position: relative;32 }33 #con span34 {35 line-height: 50px;36 text-align: center;37 display: block;38 }39 #con div40 {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>
JQ-下拉菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。