用jQuery制作仿网易云课堂导航菜单效果
2017-05-06 12:58
489 查看
最近做项目，用到类似的效果。
效果图如下：
直接上代码：
HTML:
CSS:
Js:
效果图如下：
直接上代码：
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();
}
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 制作jquery遮罩层效果导航菜单代码分享
- JQuery一行搞定当前面所对应的导航菜单变亮效果
- 【js与jquery】导航下拉菜单效果
- 分享21个基于jquery菜单导航的效果
- jQuery制作效果超棒的手风琴折叠菜单
- jquery实现个人中心导航菜单效果和美观都非常不错
- jquery上下翻滚效果导航菜单(仿flash)
- Jquery实现导航菜单折叠式效果
- jQuery制作右侧边垂直二级导航菜单
- jquery火焰等效果导航菜单
- jQuery实现个性翻牌效果导航菜单的方法
- 仿淘宝商城左侧分类导航菜单效果（平滑，高效，智能定位，jquery版)
- Jquery实现带动画效果的经典二级导航菜单
- JQUERY学习第二天之制作横纵向导航菜单
- [Jquery]导航菜单效果-纵向
- JQuery Tab 滑动们导航菜单效果
- jQuery 导航菜单点击伸缩展开效果的JS特效
- CSS制作的垂直导航菜单效果
- jQuery 实现侧边浮动导航菜单效果
- jquery实现个人中心导航菜单效果和美观都非常不错