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

代码语言:html

所属分类:菜单导航

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

代码标签: css 目录 折叠 菜单

下面为部分代码预览,完整代码请点击下载或在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";
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0