仿腾讯视频酷黑导航 nav/jquery 向下浮出
效果图：
代码：
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
