用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:;
padding:;
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:;
}
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:;
} .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:;
height:50px;
}
.left-menu{
position: absolute;
left:;
top:50px;
z-index:;
float:left;
width: 226px;
height: 459px;
background: url(../img/menu-bg.png);
}
.left-menu .menu-item{
overflow: hidden;
zoom:;
height: 72px;
border-bottom: 1px solid #787e81;
}
.menu_item:hover{
background-color: #0078d0;
}
.menu-item h2{
display: block;
font-size: 16px;
font-weight:;
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:;
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:;
}
.nav-item.all a{
display: block;
width:226px;
height: 50px;
line-height: 50px;
color:#fff;
font-size: 18px;
text-indent: 40px;
padding:;
background: url(../img/nav-icon.png) 14px center no-repeat;
} /*二级菜单*/
.second-menu{
display: none;
position: absolute;
left:226px;
top:50px;
z-index:;
width:974px;
height:457px;
border: 2px solid #0078d0;
border-top:;
border-left:;
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:;
margin: 0 20px;
}
.menu-list-item{
overflow: hidden;
zoom:;
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:;
*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:;
top:;
z-index:;
}
.banner_main{
position: absolute;
overflow: hidden;
width:100%;
height: 459px;
left:;
top:;
}
.banner_main li a img {
display:block;
position: absolute;
left:;
top:;
width:100%;
height: 459px;
}
.banner_span {
position: absolute;
left: 50%;
bottom:;
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制作仿网易云课堂导航菜单效果的更多相关文章
- [干货教程]仿网易云课堂微信小程序开发实战经验
本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [Chat]实战:仿网易云课堂微信小程序开发核心技术剖析和经验分享
本Chat以一个我参与开发并已上线运营近2年——类似网易云课堂的微信小程序项目,来进行微信小程序高级开发的学习. 本场Chat围绕项目开发核心技术分析,帮助你快速掌握在线视频.音频类小程序开发所需要的 ...
- android仿网易云音乐引导页、仿书旗小说Flutter版、ViewPager切换、爆炸菜单、风扇叶片效果等源码
Android精选源码 复现网易云音乐引导页效果 高仿书旗小说 Flutter版,支持iOS.Android Android Srt和Ass字幕解析器 Material Design ViewPage ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- 《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目
CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...
- XMind与MindManager哪个好(网易云课堂老师:Array老师讲解稿)
XMind与MindManager哪个好 作者:网易云课堂老师:Array老师讲解稿 思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,深受商业人士的喜爱.目前,XMind ...
- Python爬虫入门教程 21-100 网易云课堂课程数据抓取
写在前面 今天咱们抓取一下网易云课堂的课程数据,这个网站的数据量并不是很大,我们只需要使用requests就可以快速的抓取到这部分数据了. 你第一步要做的是打开全部课程的地址,找出爬虫规律, 地址如下 ...
- Python实例之抓取网易云课堂搜索数据(post方式json型数据)并保存到数据库
本实例实现了抓取网易云课堂中以‘java’为关键字的搜索结果,经详细查看请求的方式为post,请求的结果为JSON数据 具体实现代码如下: import requests import json im ...
随机推荐
- WKWebView 屏蔽长按手势 - iOS
研究半天还跟正常套路不一样,WKWebView 需要将 JS 注入进去,套路啊 ... 查半天资料,为了后者们开发可以提高效率,特此分享一下,不到的地方多多包涵哈. 废话不多说,直接上 code,将如 ...
- 1816: [Cqoi2010]扑克牌
Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2737 Solved: 1082[Submit][Status][Discuss] Descripti ...
- 基本数据类型补充,set集合,深浅拷贝等
1.join:将字符串,列表,用指定的字符连接,也可以用空去连接,这样就可以把列表变成str ll = ["wang","jian","wei&quo ...
- JZOJ 5906. 传送门
Description 8102年,Normalgod在GLaDOS的帮助下,研制出了传送枪.但GLaDOS想把传送枪据为己有,于是把Normalgod扔进了一间实验室.这间实 ...
- 01 mysql 基础一 (进阶)
mysql基础一 1.认识mysql与创建用户 01 Mysql简介 Mysql是最流行的关系型数据库管理系统之一,由瑞典MySQLAB公司开发,目前属于Oracle公司. MySQL是一种关联数据库 ...
- Reward HDU - 2647
传送门 Dandelion's uncle is a boss of a factory. As the spring festival is coming , he wants to dis ...
- POJ:2976-Dropping tests(二分平均值)
Dropping tests Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15508 Accepted: 5418 Descr ...
- 课后题2.87&2.86
课后题2.86&2.87 单纯就是想加点分第十章的题目都被做过了就做下第二章的,正好复习一下前面学的知识,第二章给我剩下的题目也不多了,我就挑了这个题目. 2.86 考虑一个基于IEEE浮点格 ...
- Kali2017 Metasploit连接postgresql数据库
msfdb:msf数据库管理命令 1.查看msf数据库连接状态 msf > db_status [*] postgresql selected, no connection //未连接 2.ms ...
- 5,版本控制git --标签管理
打标签 像其他版本控制系统(VCS)一样,Git 可以给历史中的某一个提交打上标签,以示重要. 比较有代表性的是人们会使用这个功能来标记发布结点(v1.0 等等). 在本节中,你将会学习如何列出已有的 ...