jquery实现左侧伸缩二级菜单显示效果代码-html代码-BFW代码库

jquery实现左侧伸缩二级菜单显示效果代码

代码语言：html

代码描述：jquery实现左侧伸缩二级菜单显示效果代码，点击缩进去可直接显示图标，悬浮显示二级菜单。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @charset "utf-8";
    /* 以下实际使用若已初始化可删除 .nav height父级需逐级设置为100%*/
    body,html{height: 100%;background: #E2E2E2}
    body,ul{margin:0;padding:0}
    body{font:14px "微软雅黑","宋体","Arial Narrow",HELVETICA;-webkit-text-size-adjust:100%;} 
    li{list-style:none} 
    a{text-decoration:none;}
    /* 以上实际使用若已初始化可删除 */
    
    /* nav */
    .nav{width: 220px;height: 100%;background: #263238;transition: all .3s;}
    .nav a{display: block;overflow: hidden;padding-left: 20px;line-height: 46px;max-height: 46px;color: #ABB1B7;transition: all .3s;}
    .nav a span{margin-left: 30px;}
    .nav-item{position: relative;}
    .nav-item.nav-show{border-bottom: none;}
    .nav-item ul{display: none;background: rgba(0,0,0,.1);}
    .nav-item.nav-show ul{display: block;}
    .nav-item>a:before{content: "";position: absolute;left: 0px;width: 2px;height: 46px;background: #34A0CE;opacity:0;transition: all .3s;}
    .nav .nav-icon{font-size: 20px;position: absolute;margin-left:-1px;}

   
    /*---------------------*/
 

 .fa{
     margin-top: 13px;
 }
 .fa-angle-right{
padding-left: 80px;
 }
 .nav-mini .fa-angle-right{
    padding-left: 120px;
 }
    /*---------------------*/
    .nav-show .fa fa-angle-right{transform:rotate(90deg);}
    .nav-show,.nav-item>a:hover{color: #FFF;background:rgba(0,0,0,.1);}
    .nav-show>a:before,.nav-item>a:hover:before{opacity:1;}
    .nav-item li:hover a{color: #FFF;background: rgba(0, 0, 0,.1);}
    
    /* nav-mini */
    .nav-mini.nav{width: 60px;}
    .nav-mini.nav .nav-icon{/* margin-left:-2px; */}
    .nav-mini.nav .nav-item>a span{display: none;}
    .nav-mini.nav .fa fa-angle-right{margin-right: -20px;}
    .nav-mini.nav .nav-item ul{position: absolute;top:0px;left:60px;width: 180px;z-index: 99;background:#3C474C;overflow: hidden;}
    .nav-mini.nav .nav-item:hover{background:rgba(255,255,255,.1);}
    .nav-mini.nav .nav-item:hover .nav-item a{color:#FFF;}
    .nav-mini.nav .nav-item:hover a:before{opacity:1;}
    .nav-mini.nav .nav-item:hover ul{display: block;}
    </style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
        // nav收缩展开
        $('.nav-item>a').on('click',function(){
            if (!$('.nav').hasClass('nav-mini')) {
                if ($(this).next().css('display') == "none") {
                    //展开未展开
                    $('.nav-item').children('ul').slideUp(300);
                    $(this).next('ul').slideDown(300);
                    $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
                }else{
                    //收缩已展开
                    $(this).next('ul').slideUp(300);
                    $('.nav-item.nav-show').removeClass('nav-show');
                }
            }
        });
        //nav-mini切换
        $('#mini').on('click',function(){
    .........完整代码请登录后点击上方下载按钮下载查看