css+js实现手风琴折叠目录菜单效果代码-html代码-BFW代码库

css+js实现手风琴折叠目录菜单效果代码

代码语言：html

代码描述：css+js实现手风琴折叠目录菜单效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
          padding: 0;
          margin: 0;
          background-color: #324252;
        }
        
        h1 {
          font-family: 'Century Gothic';
          margin: 30px auto 30px auto;
          color: #09fbd2;
          width: 100%;
          text-align: center;
        }
        
        ul.menu {
          padding: 0;
          list-style: none;
          width: 400px;
          margin: 20px auto;
          font-family: 'Century Gothic';
          box-shadow: 0px 0px 25px #00000070;
          clear: both;
          display: table;
        }
        ul.menu .list {
          font-size: 14px;
          border-bottom: 1px solid #324252;
          position: relative;
          width: 100%;
          box-sizing: border-box;
          height: 50px;
          vertical-align: sub;
          background: #3e5165;
          clear: both;
        }
        ul.menu .list:after {
          content: "\f107";
          font-family: FontAwesome;
          position: absolute;
          right: 17px;
          top: 17px;
          padding: 0px 5px;
          color: #fff;
        }
        ul.menu .list:before {
          content: '\f07b';
          font-family: FontAwesome;
          position: absolute;
          left: 17px;
          top: 17px;
          padding: 0px 5px;
          color: #fff;
        }
        ul.menu .list a {
          text-decoration: none;
          color: #fff;
          padding: 17px 0px 17px 45px;
          display: block;
          height: 100%;
          box-sizing: border-box;
        }
        ul.menu .list a:hover {
          background-color: #324252;
          transition: 300ms all;
          color: #09fbd2;
        }
        ul.menu .list .items {
          height: 0px;
          overflow: hidden;
        }
        ul.menu .list .items a {
          padding: 17px;
        }
        ul.menu .list .items a:hover {
          background-color: #3f5d79;
          color: #fff;
          transition: 300ms all;
        }
        ul.menu .list:last-child {
          border-bottom: none;
        }
        ul.menu .active:after {
          content: "\f106";
          font-family: FontAwesome;
          position: absolute;
          right: 17px;
          top: 17px;
          padding: 0px 5px;
          color: #fff;
        }
        ul.menu .active:before {
          content: '\f07c';
          font-family: FontAwesome;
          position: absolute;
          left: 17px;
          top: 17px;
          padding: 0px 5px;
          color: #fff;
        }
        ul.menu .active > .items {
          display: block;
          background: #23313f;
          padding: 0px;
          height: auto;
          color: #fff;
          transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
          transition: all 200ms;
          clear: both;
          float: left;
          width: 100%;
        }
        ul.menu .active > .items li {
          padding: 0px;
          border-bottom: 1px solid #324252;
          list-style: none;
        }
        ul.menu .active > .items li:last-child {
          border-color: transparent;
          padding-bottom: 0px;
        }
        ul.menu .active > .items .active > .items {
          background-color: #2f4b67;
        }
        ul.menu .active > a {
          color: #46efa4;
          text-transform: uppercase;
     .........完整代码请登录后点击上方下载按钮下载查看