• 成人电影 成人电影 成人电影
  • 成人电影 成人电影 成人电影
  • 成人电影 成人电影 成人电影
  • 设为首页 - 加入收藏
    广告 1000x90
    您的当前位置:云鼎彩票 > 云鼎娱乐平台 > 效果代码 > 正文

    jQuery简单二级下拉菜单

    来源:未知 编辑:admin 时间:2015-09-02
    jQuery简单二级下拉菜单,非常经典欢迎分享学习。
    html代码
    1. <div class="UpLayer">
      <dl>
      <dt>
      <a href="javascript:void(0)">聚合分享</a></dt>
      <dd>
      <a href="http://www.juheweb.com/js/">特效</a> <a href="http://www.juheweb.com/Tutorials/">教程</a> <a href="http://www.juheweb.com/zy/">资源</a> <a href="http://www.juheweb.com/mb/">模板</a> <a href="http://www.juheweb.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-familyArial,VerdanaHelveticasans-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:absolutez-index:3;padding:0 5px;line-height:20px;} 
    13. .UpLayer02{border:#ccc 1px solidborder-bottom:none;background:#f1f1f1margin:-1px 0 0 -1px;} 
    14. .UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5pxline-height:20pxbackground:#f1f1f1display:nonemargin:19px 0 0 -1px;} 
    15. .UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;} 

    最好不要忘记插入jQuery js文件,最好下载最新的。当然也可以用以下文件:

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

    相关推荐:

    网友评论:

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名: 验证码:点击我更换图片
    

    模板天下 www.mobantianxia.com 联系QQ:498872301 邮箱:498872301@qq.com

    Copyright © 2002-2011 DEDECMS. 织梦科技 版权所有 Power by DedeCms

    Top