jquery左侧分类导航菜单（左右分开导航）

其他 2019-02-19 02:02:25 阅读次数: 0

效果：

12693563-95b56e604390dab1.png
12693563-eb27eb8d6838cc5f.png

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            font-family:'microsoft yahei';
            overflow:hidden;
            background:#fff;
        }
        .w {
            width:1200px;
            margin:0 auto;
        }
        a {
            text-decoration:inherit;
        }
        a,li {
            list-style:none;
        }
        .cf:before,.cf:after,.clearfix:before,.clearfix:after {
            content:"";
            display:table;
        }
        .cf:after,.clearfix:after {
            clear:both;
        }
        .cf,.clearfix {
            clear:both;
            *zoom:1;
        }
        /*导航条*/
        #nav {
            width:100%;
            min-width:1200px;
            height:30px;
            background:#00a1ea;
            margin-top:100px;
        }
        #nav ul li {
            float:left;
        }
        #nav ul li:first-child {
            margin-left:17%;
        }
        #nav ul li a {
            font-size:16px;
            color:#fff;
            line-height:30px;
            padding:0 35px;
            display:inline-block;
        }
        #nav ul li a:hover {
            background:#fff000;
            color:#00a1ea;
        }
        #nav ul li.active a {
            background:#fff000;
            color:#00a1ea;
        }
        /*banner上面浮层*/
        .cat_wrap {
            box-shadow:1px 1px 2px #bfbcbc;
            box-shadow:0 -4px 8px 0 rgba(7,17,27,.1),0 4px 8px 0 rgba(7,17,27,.1);
            background:#fff;
            width:180px;
            position:absolute;
            z-index:999;
            top:-30px;
        }
        .cat_wrap .cat_title {
            width:192px;
            height:50px;
            line-height:50px;
            font-size:16px;
            background:url(i/juxing.png) no-repeat;
            margin-left:-6px;
            margin-top:-15px;
            background-size:100%;
            color:#fff;
            text-align:center;
        }
        .cat_wrap .cat_header {
            min-height:450px;
        }
        .cat_wrap .cat_list div {
            background:#fff;
            border-left:4px solid transparent;
            border-top:1px solid transparent;
            border-bottom:1px solid transparent;
        }
        .cat_wrap .cat_list div li {
            float:left;
            color:#323232;
            font-size:14px;
            margin:7px 0px;
        }
        .cat_wrap .cat_list div li:first-child {
            margin-left:15px;
            margin-right:10px;
        }
        .cat_wrap .cat_list {
            cursor:pointer;
        }
        .cat_wrap .cat_list div.active {
            width:177px;
            padding-left:1px;
            position:relative;
            z-index:999;
            border-left:3px solid #00a1ea;
            border-top:1px solid #00a1ea;
            border-bottom:1px solid #00a1ea;
            border-right:none;
        }
        /*banner浮层滑动显示弹框*/
                .cat_subcont {
            display:none;
        }
        .cat_subcont.active {
            display:block;
        }
        .cat_subcont .cat_sublist {
            position:absolute;
            z-index:998;
            top:30px;
            left:180px;
            padding-top:5px;
            min-height:394px;
            width:740px;
            background:#fff;
            border-top:1px solid #f9f9f9;
            border-left:1px solid #00a1ea;
            border-bottom:1px solid #00a1ea;
            border-right:1px solid #00a1ea;
        }
        .cat_subcont .cat_sublist .fore1 {
            width:740px;
        }
        .cat_subcont .cat_sublist .fore1 .fore_list {
            padding:0 20px;
        }
        .cat_subcont .cat_sublist .fore1 .fore_list h3 {
            padding:5px;
            border-bottom:1px solid #d3d3d3;
        }
        .cat_subcont .cat_sublist .fore1 .fore_list h3 a {
            font-size:14px;
            color:#00a1ea;
        }
        .cat_subcont .cat_sublist .fore1 .fore_list li {
            float:left;
            padding:5px;
        }
        .cat_subcont .cat_sublist .fore1 .fore_list li a {
            font-size:12px;
            color:#333;
        }
        .cat_subcont .cat_sublist .fore1 .fore_list li a:hover {
            color:#00a1ea;
            text-decoration:underline;
        }

    </style>
</head>
<body>
    <div id="nav">
        <ul class="w">
            <li class="active"><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="w clearfix" style="position:relative;">
        <!-- banner上面浮层 -->
        <div class="cat_wrap">
            <div class="cat_header">
                <h3 class="cat_title">全部课程</h3>
                <div class="cat_list">
                    <div class="float for1">
                        <ul class="clearfix">
                            <li>云计算</li>
                            <li>大数据</li>
                        </ul>
                    </div>
                    <div class="float for2">
                        <ul class="clearfix">
                            <li>移动互联网</li>
                            <li>架构设计</li>
                        </ul>
                    </div>
                    <div class="float for3">
                        <ul class="clearfix">
                            <li>软件测试</li>
                            <li>产品创新</li>
                        </ul>
                    </div> 
                    <div class="float for4">
                        <ul class="clearfix">
                            <li>敏捷开发</li>
                            <li>数据库</li>
                        </ul>
                    </div> 
                    <div class="float for5">
                        <ul class="clearfix">
                            <li>系统运维</li>
                            <li>编辑语言</li>
                        </ul>
                    </div> 
                    <div class="float for6">
                        <ul class="clearfix">
                            <li>办公技能</li>
                            <li>项目管理</li>
                        </ul>
                    </div> 
                    <div class="float for7">
                        <ul class="clearfix">
                            <li>人力资源</li>
                            <li>管理技能</li>
                        </ul>
                    </div>
                    <div class="float for8">
                        <ul class="clearfix">
                            <li>营销管理</li>
                            <li>领导力</li>
                        </ul>
                    </div>
                    <div class="float for9">
                        <ul class="clearfix">
                            <li>职业素养</li>
                            <li>其他</li>
                        </ul>
                    </div> 
                    <div class="float for9">
                        <ul class="clearfix">
                            <li>职业素养</li>
                            <li>其他</li>
                        </ul>
                    </div> 
                </div>
            </div>
            <!-- banner浮层滑动显示弹框 -->
            <div class="cat_subcont">
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算1</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算1</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算2</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算2</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算2</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算3</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算3</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算4</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算4</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算5</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算6</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算6</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算7</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算8</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算8</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算9</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算9</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="cat_sublist">
                    <!-- 浮层左边列表 -->
                    <div class="fore1">
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算10</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                        <div class="fore_list">
                            <h3><a href="javascript:void(0);">云计算10</a></h3>
                            <ul class="clearfix">
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云平台》</a></li>
                                <li><a href="javascript:void(0);">《大数据》</a></li>
                                <li><a href="javascript:void(0);">《虚拟化技术》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                                <li><a href="javascript:void(0);">《云计算基础架构》</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        //banner左侧内容栏
        $(function(){
            var thisUB;
            //鼠标离开左侧内容栏
            $('.cat_wrap .cat_list .float').mouseleave(function(even){
                thisMouseOut();
            });
            //鼠标点击左侧内容栏   滑动出弹层
            $('.cat_wrap .cat_list .float').mouseenter(function(){
                $(this).addClass("active").siblings().removeClass("active");
                thisUB = $(this).index();
                $('.cat_subcont').addClass('active');
                $('.cat_sublist').hide().eq(thisUB).show();
            });
           
            $('.cat_subcont').mouseenter(function(){
                $('.cat_subcont').addClass('active');
                $('.cat_wrap .cat_list .float').eq(thisUB).addClass('active');
            });
            $('.cat_subcont').mouseleave(function(){
                thisMouseOut();
            });

             //函数——执行鼠标离开左侧内容栏的动作
            function thisMouseOut(){
                $('.cat_subcont').removeClass('active');
                $('.cat_wrap .cat_list .float').removeClass('active');
            }
        });     
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_34239592/article/details/86924957
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022