用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&period;Io及豆瓣Api开发的开源项目
CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...
XMind与MindManager哪个好（网易云课堂老师&colon;Array老师讲解稿）
XMind与MindManager哪个好作者:网易云课堂老师:Array老师讲解稿思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,深受商业人士的喜爱.目前,XMind ...
Python爬虫入门教程 21-100 网易云课堂课程数据抓取
写在前面今天咱们抓取一下网易云课堂的课程数据,这个网站的数据量并不是很大,我们只需要使用requests就可以快速的抓取到这部分数据了. 你第一步要做的是打开全部课程的地址,找出爬虫规律, 地址如下 ...
Python实例之抓取网易云课堂搜索数据（post方式json型数据）并保存到数据库
本实例实现了抓取网易云课堂中以‘java’为关键字的搜索结果,经详细查看请求的方式为post,请求的结果为JSON数据具体实现代码如下: import requests import json im ...

随机推荐

9&period;27js拓展、bootstrap菜鸟教程
js(点击挂上与点击移除) <div id="dd" style="width:200px; height:200px; background-color:#6 ...
oracle查看数据库的字符集
注意如果是从旧的数据库复制,一定要保证字符集使用一模一样的,不然会有很多问题(比如汉字在UTF8占3个字符,在GBK占2个字符,所以设置的列宽度要比原来的大才行,不然就会报值太大的错误) select ...
SAP&lowbar;20140304
1. SAP 主打产品 R/3 :分布式客户端/服务器环境的标准ERP软件. 2. 主要功能模块:销售和分销,物料管理,生产计划,质量管理,工厂维修,人力资源,工业方案,办公室和通信,项目系统 ...
【转】android 自定义控件使用declare-styleable进行配置属性（源码角度）
原文网址:http://blog.csdn.net/vipzjyno1/article/details/23696537 最近在模仿今日头条,发现它的很多属性都是通过自定义控件并设定相关的配置属性进行 ...
邮件Mail
邮件开发准备: 准备工作, 环境搭建: 1. 本地搭建一个邮件服务器 -à 易邮服务器,eyoumailserversetup.exe 2. 新建邮箱账号张三给李四发邮件. 步骤1: 新建域名: 工 ...
【转】第一个MiniGUI程序：模仿QQ界面
最近几天在学MiniGui,最好的学习方法就是实践,先写个练练笔.其实只是一个界面,不知道什么时候才能真正写个完整的程序.初次写GUI程序,感觉写得不好,还请高手来指教. //============ ...
jq 22 一个很好图片显示
Picbox 示例页面:http://www.jq22.com/Demo961
wpf 实现 css3 中 boxshadow inset 效果
using System; using System.Linq; using System.Windows; using System.Windows.Controls; using System.W ...
022 Spark shuffle过程
1.官网 http://spark.apache.org/docs/1.6.1/configuration.html#shuffle-behavior Spark数据进行重新分区的操作就叫做shuf ...
weblogic11G 修改密码
weblogic11的登录密码修改方法: 1. 登陆到weblogic后选中domain structure下的security Realms(如图一) (图一) 详情如图二: (图二) 2. 双 ...