用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 ...

随机推荐

【读书笔记】你不知道的JavaScript（上卷）--作用域是什么
第一章作用域 1.理解作用域几个名词的介绍引擎:从头到尾负责整个JavaScript程序的编译及执行过程编译器:负责语法分析及代码生成器等脏活累活作用域:负责收集并维护由所有声明的标识符(变 ...
【模板时间】◆模板·I◆ 倍增计算LCA
[模板·I]LCA(倍增版) 既然是一篇重点在于介绍.分析一个模板的Blog,作者将主要分析其原理,可能会比较无趣……(提供C++模板) 另外,给reader们介绍另外一篇非常不错的Blog(我就是从 ...
PXE自动化安装CentOS6/7
服务器为centos7 安装前准备:关闭防火墙和SELINUX 虚拟机准备第二块网卡,设置主机模式,关闭虚拟机网络配置中主机模式的DHCP功能,并设置静态IP nmcli c a con-name e ...
PHP siege 压测 QPS大小
1.使用 PHP-FPM SOCKET的形式通讯 2.配置 PHP-FPM配置 [root@bogon php-fpm.d]# ls -al 总用量 drwxr-xr-x. root root 8月 ...
html之table&select不为人知的操作
table标签和其它标签不一样,他有属性和方法! table属性: rows 可以得到table的row集合 cells 得到table所有单元格 table方法: insertR ...
#Python编程从入门到实践#第二章笔记
1.变量 (1)变量名只能包含字母.数字和下划线,不能包含空格 (2)不要将python关键字与函数名作为变量名 (3)简短有描述性,避免使用小写字母l和大写字母O (4)python 始终 ...
Nginx技术深入剖析
Nginx软件功能模块说明核心功能模块(Core functionality):主要对应配置文件的Main区块和Events区块. 标准的http功能模块: 企业场景常用的Nginx http功能 ...
urllib使用一
urllib.urlopen()方法: 参数: 1.url(要访问的网页链接http:或者是本地文件file:) 2.data(如果有,就会由GET方法变为POST方法,提交的数据格式必须是appli ...
动态调试smali代码
Android Killer对应用进行反编译为smali代码,看看Manifest文件中application标签里面是否有android:debuggable="true",没有 ...
Android 内嵌 HTML5 并进行交互
Android与HTML5的交互主要是两个部分, 与HTML5的交互以及与JavaScript的交互, 与HTML5的交互可以通过注册onclick事件转化为与JavaScript的交互 Androi ...

用jQuery制作仿网易云课堂导航菜单效果

用jQuery制作仿网易云课堂导航菜单效果的更多相关文章

随机推荐

热门专题