jQuery簡單二級下拉菜單

欄目分類：效果代碼   發布日期：2014-09-17   來源：互聯網   瀏覽次數：次

1. <div class="UpLayer">
   <dl>
   <dt>
   <a href="javascript：void(0)">聚合分享</a></dt>
   <dd>
   <a href="http://www.greencircleart.com/js/">特效</a> <a href="http://www.greencircleart.com/Tutorials/">教程</a> <a href="http://www.greencircleart.com/zy/">資源</a> <a href="http://www.greencircleart.com/mb/">模板</a> <a href="http://www.greencircleart.com/news/">資訊</a></dd>
   </dl>
   </div>

js代碼

1. <script type="text/javascript">  
2. // 【經典】彈出層菜單  
3. $(document).ready(function(){  
4.     var objStr = ".UpLayer";  
5.     $(objStr).each(function(i){  
6.         $(this).click(function(){  
7.             $($(objStr+" dd")[i]).show();  
8.             $($(objStr+" dt")[i]).addClass("UpLayer02");  
9.         });  
10.         $(this).hover(function(){},function(){  
11.             $($(objStr+" dd")[i]).hide();  
12.             $($(objStr+" dt")[i]).removeClass("UpLayer02");  
13.         });   
14.     });  
15. });  
16. </script>  

css代碼

1. body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;} 
2. li{list-style:none;} 
3. img{border:none;} 
4. u{text-decoration:none;} 
5. em{font-style:normal;} 
6. a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());} 
7. body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;} 
8. .box{margin:0 auto;text-align:left;width:920px;} 
9. .clear{clear:both;} 
10. /* 【經典】彈出層菜單 */ 
11. .UpLayer{ margin:100px;} 
12. .UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} 
13. .UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} 
14. .UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} 
15. .UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;} 

最好不要忘記插入jQuery js文件,最好下載最新的。當然也可以用以下文件：

1. http://www.greencircleart.com/demo/js/jquery.min.js