用jQuery制作仿网易云课堂导航菜单效果
最近做项目，用到类似的效果。
效果图如下：
直接上代码：
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./css/index.css"> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/index.js"></script> </head> <body> <!--nav--> <div class="nav-section"> <div class="nav-box center"> <ul class="left-menu"> <li class="menu-item"> <h2><a href="">出国英语</a></h2> <p><a href="">雅思</a><a href="">托福</a><a href="">GRE</a></p> </li> <li class="menu-item"> <h2><a href="">学历英语</a></h2> <p><a href="">四级</a><a href="">六级</a><a href="">考研英语</a></p> </li> <li class="menu-item"> <h2><a href="">职业英语</a></h2> <p><a href="">商务英语</a><a href="">翻译资格</a></p> </li> <li class="menu-item"> <h2><a href="">实用英语</a></h2> <p><a href="">新概念英语</a><a href="">应用英语</a></p> </li> <li class="menu-item"> <h2><a href="">小语种</a></h2> <p><a href="">日语</a><a href="">韩语</a><a href="">法语</a></p> </li> <li class="menu-item"> <h2><a href="">职称英语</a></h2> <p><a href="">基础班</a><a href="">精讲班</a></p> </li> </ul> <div class="right-nav"> <ul> <li class="nav-item all"><a href="">全部课程</a></li> <li class="nav-item"><a href="">首页</a></li> <li class="nav-item"><a href="">课程中心</a></li> <li class="nav-item"><a href="">在线模考</a></li> <li class="nav-item"><a href="">下载中心</a></li> <li class="nav-item"><a href="">名师风采</a></li> <li class="nav-item"><a href="">留言管理</a></li> </ul> </div> <div class="second-menu"> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">雅思</a> <ul> <li><a href="">雅思5.5分</a></li> <li><a href="">雅思6分</a></li> <li><a href="">雅思6.5分</a></li> <li><a href="">高分班</a></li> <li><a href="">雅思7分</a></li> <li><a href="">雅思基础</a></li> <li><a href="">雅思精讲</a></li> <li><a href="">雅思强化</a></li> <li><a href="">雅思单项</a></li> <li><a href="">剑桥雅思</a></li> <li><a href="">雅思预测班</a></li> <li><a href="">雅思应试技巧</a></li> <li><a href="">雅思微课堂</a></li> <li><a href="">雅思现场</a></li> <li><a href="">雅思精华班</a></li> <li><a href="">雅思串讲班</a></li> <li><a href="">CRS辅导课程</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">托福</a> <ul> <li><a href="">深度班</a></li> <li><a href="">托福基础班</a></li> <li><a href="">精品班</a></li> <li><a href="">精华班</a></li> <li><a href="">托福强化班</a></li> <li><a href="">托福单项</a></li> <li><a href="">托福现场班</a></li> <li><a href="">托福冲刺班</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">GRE</a> <ul> <li><a href="">GRE单项</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">英语四级</a> <ul> <li><a href="">速成班</a></li> <li><a href="">精品班</a></li> <li><a href="">冲刺班</a></li> <li><a href="">真题解析</a></li> <li><a href="">单项</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">英语六级</a> <ul> <li><a href="">精品班</a></li> <li><a href="">冲刺班</a></li> <li><a href="">单项</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">考研英语</a> <ul> <li><a href="">冲刺串讲班</a></li> <li><a href="">全程班</a></li> <li><a href="">基础班</a></li> <li><a href="">强化班</a></li> <li><a href="">研究生入学考试英语</a></li> <li><a href="">在职申硕</a></li> <li><a href="">在职攻硕</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">公共英语</a> <ul> <li><a href="">PETS一级</a></li> <li><a href="">PETS二级</a></li> <li><a href="">PETS三级</a></li> <li><a href="">PETS四级</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">日语等级</a> <ul> <li><a href="">一级</a></li> <li><a href="">二级</a></li> <li><a href="">三级</a></li> <li><a href="">四级</a></li> <li><a href="">新日语能力考N1</a></li> <li><a href="">新日语能力考N2</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">自考|成考</a> <ul> <li><a href="">自考英语</a></li> <li><a href="">成人考试</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">大学英语A/B级</a> <ul> <li><a href="">真题解析</a></li> <li><a href="">单项</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">专四|专八</a> <ul> <li><a href="">初级班</a></li> <li><a href="">中级班</a></li> <li><a href="">高级班</a></li> <li><a href="">单项</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">雅思</a> <ul> <li><a href="">雅思5.5分</a></li> <li><a href="">雅思6分</a></li> <li><a href="">雅思6.5分</a></li> <li><a href="">高分班</a></li> <li><a href="">雅思7分</a></li> <li><a href="">雅思基础</a></li> <li><a href="">雅思精讲</a></li> <li><a href="">雅思强化</a></li> <li><a href="">雅思单项</a></li> <li><a href="">剑桥雅思</a></li> <li><a href="">雅思预测班</a></li> <li><a href="">雅思应试技巧</a></li> <li><a href="">雅思微课堂</a></li> <li><a href="">雅思现场</a></li> <li><a href="">雅思精华班</a></li> <li><a href="">雅思串讲班</a></li> <li><a href="">CRS辅导课程</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">托福</a> <ul> <li><a href="">深度班</a></li> <li><a href="">托福基础班</a></li> <li><a href="">精品班</a></li> <li><a href="">精华班</a></li> <li><a href="">托福强化班</a></li> <li><a href="">托福单项</a></li> <li><a href="">托福现场班</a></li> <li><a href="">托福冲刺班</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">GRE</a> <ul> <li><a href="">GRE单项</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">商务英语</a> <ul> <li><a href="">雅思5.5分</a></li> <li><a href="">雅思6分</a></li> <li><a href="">雅思6.5分</a></li> <li><a href="">高分班</a></li> <li><a href="">雅思7分</a></li> <li><a href="">雅思基础</a></li> <li><a href="">雅思精讲</a></li> <li><a href="">雅思强化</a></li> <li><a href="">雅思单项</a></li> <li><a href="">剑桥雅思</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">翻译资格</a> <ul> <li><a href="">深度班</a></li> <li><a href="">托福基础班</a></li> <li><a href="">精品班</a></li> <li><a href="">精华班</a></li> <li><a href="">托福强化班</a></li> <li><a href="">托福单项</a></li> <li><a href="">托福现场班</a></li> <li><a href="">托福冲刺班</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">GRE</a> <ul> <li><a href="">GRE单项</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">新概念英语</a> <ul> <li><a href="">雅思5.5分</a></li> <li><a href="">雅思6分</a></li> <li><a href="">雅思6.5分</a></li> <li><a href="">高分班</a></li> <li><a href="">雅思7分</a></li> <li><a href="">雅思基础</a></li> <li><a href="">雅思精讲</a></li> <li><a href="">雅思强化</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">新概念英语</a> <ul> <li><a href="">雅思5.5分</a></li> <li><a href="">雅思6分</a></li> <li><a href="">雅思6.5分</a></li> <li><a href="">高分班</a></li> <li><a href="">雅思7分</a></li> <li><a href="">雅思基础</a></li> <li><a href="">雅思精讲</a></li> <li><a href="">雅思强化</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">小语种</a> <ul> <li><a href="">日语</a></li> <li><a href="">韩语</a></li> <li><a href="">法语</a></li> <li><a href="">德语</a></li> <li><a href="">俄语</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">职称英语</a> <ul> <li><a href="">基础班</a></li> <li><a href="">精华班</a></li> <li><a href="">理工类</a></li> <li><a href="">卫生类</a></li> <li><a href="">综合类</a></li> </ul> </div> </div> </div> </div> </div> <!--banner--> <div class="banner"> <div class="banner_main"> <ul class="banner_ul"> <li><a href=""><img src="./img/banner-1.png"/></a></li> <li><a href=""><img src="./img/banner-2.png"/></a></li> <li><a href=""><img src="./img/banner-1.png"/></a></li> </ul> </div> <p class="banner_left"></p> <p class="banner_right"></p> <div class="banner_span"><p><span class="banner_span_one"></span> <span></span><span></span></p></div> </div> </body> </html>
CSS:
body,ul,li,p,h1,h2,h3,h4,h5{ margin:0; padding:0; font-size:100%; } body{ font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif; font-size: 14px; } button,input,select,textarea{ font-family: inherit; font-size: 100%; margin: 0; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } li{ list-style: none; } a{ text-decoration:none; color:#000; background: transparent; } a:focus{ outline: none; } img{ border:0; } .fl{ float: left; } .fr{ float: right; } .center{ width: 1200px; margin: 0 auto 0; } /*nav*/ .nav-section{ height: 50px; background-color: #0078d0; } .nav-box{ position: relative; z-index: 5; height:50px; } .left-menu{ position: absolute; left:0; top:50px; z-index:10; float:left; width: 226px; height: 459px; background: url(../img/menu-bg.png); } .left-menu .menu-item{ overflow: hidden; zoom: 1; height: 72px; border-bottom: 1px solid #787e81; } .menu_item:hover{ background-color: #0078d0; } .menu-item h2{ display: block; font-size: 16px; font-weight: 400; text-indent: 14px; margin-top: 12px; } .menu-item h2 a{ color:#fff; } .menu-item p{ margin-top: 12px; } .menu-item p a{ margin-left: 14px; color: #97d2f7; } .menu-item p a:hover{ color:#ffffff; } .right-nav{ overflow: hidden; zoom: 1; float:left; height:50px; } .nav-item{ float:left; } .nav-item a{ display: block; height: 50px; line-height: 50px; padding: 0 20px; font-size: 18px; color:#ffffff; } .nav-item a:hover{ background-color: #188eee; } .nav-item.all{ background: #188eee; padding:0; } .nav-item.all a{ display: block; width:226px; height: 50px; line-height: 50px; color:#fff; font-size: 18px; text-indent: 40px; padding: 0; background: url(../img/nav-icon.png) 14px center no-repeat; } /*二级菜单*/ .second-menu{ display: none; position: absolute; left:226px; top:50px; z-index: 5; width:974px; height:457px; border: 2px solid #0078d0; border-top: 0; border-left: 0; background-color: #ffffff; background-color: rgba(255,255,255,0.95)\9; *background-color: #fff; } @media screen and(min-width: 0px){ .second-menu{ background-color: #ffffff; } } .menu-list{ overflow: hidden; zoom: 1; margin: 0 20px; } .menu-list-item{ overflow: hidden; zoom: 1; margin-top: -2px; border-top: 1px solid #f2f0f0; } .menu-list-item a.primary-link{ display: block; float: left; width: 130px; margin-top: 12px; color: #0078d0; } .menu-list-item ul{ float: left; width: 750px; margin: 12px 0 0 20px; } .menu-list-item ul li{ float: left; margin: 0 10px 12px; *margin-bottom: 0; *padding-bottom: 12px; } .menu-list-item ul li a{ color: #333333; } .menu-list-item ul li a:hover{ color: #0078d0; } /*banner*/ .banner { position: relative; width:100%; height: 459px; left:0; top:0; z-index: 1; } .banner_main{ position: absolute; overflow: hidden; width:100%; height: 459px; left: 0; top:0; } .banner_main li a img { display:block; position: absolute; left:0; top:0; width:100%; height: 459px; } .banner_span { position: absolute; left: 50%; bottom:0; width:1200px; height:30px; margin-left: -600px; } .banner_span span { cursor: pointer; width:10px; height:10px; border-radius: 50%; display:block; float:left; margin:0 6px; background: #ffffff; } .banner_span p { width:66px; height:30px; margin:0 auto; } .banner_span .banner_span_one{ cursor: pointer; background: #0078d0; }
Js:
$(function(){ //二级菜单显示 var objShowMenu = null; var index; $(".menu-list").hide(); $(".left-menu li").each(function(){ $(this).hover(function(){ $(this).css({"background-color":"#0078d0"}); $(".second-menu").show(); $(".second-menu").css({"background-color":"rgba(255,255,255,0.95)"}); $(".menu-list").css("display","none"); index = $( ".left-menu li" ).index($(this)[0]); $(".menu-list").eq(index).show(); objShowMenu = $(".menu-list").eq(index); }, function(){ $(this).css({"background-color":"transparent"}); $(".second-menu").css("display","none"); }); }); $(".second-menu").hover(function(){ $(".left-menu li").eq(index).css({"background":"#0078d0"}); $(this).css("display","block"); objShowMenu.show(); },function(){ $(this).hide(); $(".left-menu li").css({"background":"transparent"}); }); //banner效果 var num = $('.banner_span span').length; var curIndex = 0; var timer_banner = null; $('.banner_ul li:gt(0)').hide(); //底下小按钮点击切换 $('.banner_span span').click(function(){ $(this).addClass('banner_span_one').siblings('span').removeClass('banner_span_one'); var curIndex_span = $('.banner_span span').index(this); $('.banner_ul li').eq(curIndex_span).fadeIn(700).siblings('li').hide(); curIndex = curIndex_span; }); //自动播放 function bannerMove(){ timer_banner = setInterval(function(){ move_banner(); },3000) } bannerMove();//开始自动播放 $('.banner').hover(function(){ clearInterval(timer_banner); },function(){ bannerMove(); }); //banner 右边点击 function move_banner(){ if(curIndex==num-1){ curIndex = -1; } $('.banner_ul li').eq(curIndex+1).fadeIn(1000).siblings('li').hide(); //按钮切换 $('.banner_span span').eq(curIndex+1).addClass('banner_span_one').siblings('span').removeClass('banner_span_one'); curIndex++; } //课程推荐导航切换 var navList = $(".recommend-tab li"); var switchItem = $(".recommend-list"); switchNav(navList,switchItem); function switchNav(switchObj,targetObj){ var className = '.'+targetObj.attr('class'); var targetIndex = 0; changeStyle(); switchObj.click(function(){ targetIndex = switchObj.index(this); changeStyle(); return false; }); function changeStyle(){ switchObj.eq(targetIndex).addClass('active-tab').siblings('li').removeClass('active-tab'); targetObj.eq(targetIndex).fadeIn('slow').siblings(className).hide(); } } });
