仿腾讯视频酷黑导航 nav/jquery 向下浮出

浏览数：49 / 时间：2015年06月09日

效果图：

代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <title>jquery nav 导航</title>
  5     <meta charset="utf-8" />
  6     <link rel="stylesheet" href="css/style.css" />
  7 </head>
  8 <body>
  9     <!--nav-box-->
 10     <div id="navBox">
 11         <nav>
 12             <!--left-->
 13             <div class="left-nav">
 14                 <img class="logo" src="img/logo.png" />
 15                 <ul>
 16                     <li><a href="#">首页</a></li>
 17                     <li><a href="#">电影</a></li>
 18                     <li><a href="#">电视剧</a></li>
 19                     <li><a href="#">综艺</a></li>
 20                     <li><a href="#">娱乐</a></li>
 21                     <li id="more-li">
 22                         <a href="#">更多</a><span class="downIcon"></span>
 23                     </li>
 24                 </ul>
 25                 <div class="more-box">
 26 
 27                 </div>
 28             </div>
 29             <div class="right-nav">
 30                 <ul>
 31                     <li><a href="#">登陆</a></li>
 32                     <li id="drapDown1"><a href="#">看过</a><span class="downIcon"></span></li>
 33                     <li id="drapDown2"><a href="#">收藏</a><span class="downIcon"></span></li>
 34                     <li><a href="#">上传</a></li>
 35                     <li>
 36                         <input placeholder="中国合伙人" class="search" type="text">
 37                     </li>
 38                 </ul>
 39                 <div id="hi1" class="hiddenBox">
 40                     <div class="setImg"><img src="img/up.png"/></div>
 41                     <div class="box-con">
 42                         是我！ O(∩_∩)O哈哈~
 43                     </div>
 44                 </div>
 45                 <div id="hi2" class="hiddenBox">
 46                     <div class="setImg"><img src="img/up.png"/></div>
 47                     <div class="box-con">
 48                         不是我！ O(∩_∩)O哈哈~
 49                     </div>
 50                 </div>
 51             </div>
 52         </nav>
 53     </div>
 54     <script src="js/jquery.js"></script>
 55 <script>
 56 $(document).ready(function(){
 57     $(‘#more-li‘).hover(function(){
 58         $(this).children(‘span‘)
 59             .removeClass(‘down-img-run-up‘)
 60             .addClass(‘down-img-run‘);
 61         $(‘#more-li‘).css({
 62             backgroundColor: ‘#353535‘
 63         });
 64         $(‘.more-box‘).toggle(300,function(){
 65             var disp = $(‘.more-box‘)
 66                 .attr(‘style‘)
 67                 .split(‘:‘)[1].split(‘;‘)[0];
 68             if($.trim(disp) != ‘block‘){
 69                 $(‘#more-li‘).css({
 70                     backgroundColor: ‘‘
 71                 });
 72                 $(‘.downIcon‘)
 73                     .removeClass(‘down-img-run‘)
 74                     .addClass(‘down-img-run-up‘);
 75             }
 76         });
 77     });
 78     $(‘.more-box‘).hover(function(){
 79         $(this).hide(200)
 80         $(‘.downIcon‘)
 81             .removeClass(‘down-img-run‘)
 82             .addClass(‘down-img-run-up‘);;
 83     });
 84 });
 85 
 86 $(document).ready(function(){
 87     $(‘.right-nav li[id]‘).hover(function(){
 88         //===获得ID标号
 89         var sId = $(this).attr(‘id‘);
 90         var num = sId.substring(8,sId.length);
 91         //===隐藏其他被选择元素 箭头向下
 92         for(var j = 1; j <= 2; j++){
 93             if(j!= num){
 94                 $(‘#hi‘+j).hide();
 95                 $(‘.downIcon‘)
 96                     .removeClass(‘down-img-run‘)
 97                     .addClass(‘down-img-run-up‘);
 98             }
 99         }
100         //===箭头向上
101         $(this).children(‘span‘)
102             .removeClass(‘down-img-run-up‘)
103             .addClass(‘down-img-run‘);
104         //===交替显示
105         $(‘#hi‘+num).fadeToggle(100,function(){
106             //===获得当前display属性值
107             var disp = $(this).attr(‘style‘)
108                 .split(‘:‘)[1].split(‘;‘)[0];
109             //===如果被隐藏 箭头向下
110             if($.trim(disp) != ‘block‘){
111                 $(‘#drapDown‘+num)
112                     .children(‘span‘)
113                     .removeClass(‘down-img-run‘)
114                     .addClass(‘down-img-run-up‘);
115             }
116         });
117     });
118     //===点击下方框隐藏
119     $(‘.hiddenBox‘).hover(function(){
120         $(this).hide(200);
121         $(‘.downIcon‘)
122             .removeClass(‘down-img-run‘)
123             .addClass(‘down-img-run-up‘);
124     });
125 });
126 
127      </script>         
128 </body>
129 </html>


原文：http://www.oschina.net/code/snippet_1242866_34687