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: ab.........完整代码请登录后点击上方下载按钮下载查看