css实现左侧可伸缩多级菜单效果代码-html代码-BFW代码库

css实现左侧可伸缩多级菜单效果代码

代码语言：html

代码描述：css实现左侧可伸缩多级菜单效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,800" rel="stylesheet">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
        body {
          font-family: 'Work Sans', sans-serif;
          margin: 0;
          background-color: #eee;
        }
        
        /* Layout */
        
        #container {
          padding: 0;
          margin: 0;
          background-color: #fff;
        }
        
        #main {
          padding: 4% 1.5em;
          max-width: 55em;
          margin: 0 auto;
        }
        
        #header {
          padding: 1.5em;
          margin: 0 0 1em 0;
          background-color: #eee;
        }
        
        #footer {
          padding: 1.5em;
          margin: 2em 0 0 0;
          background-color: #eee;
        
        }
        
        
        /* Menu Styles */
        
        .primary-nav {
        	position: fixed;
        	z-index: 999;
        }
        
        .menu {
        	position: relative;
        }
        
        .menu ul {
          margin: 0;
          padding: 0;
          list-style: none;
        	
        }
        
        .open-panel {
          border: none;
          background-color:#fff;
          padding: 0;
        }
        
        .hamburger {
        	background: #fff;
        	position: relative;
        	display: block;
        	text-align: center;
        	padding: 13px 0;
        	width: 50px;
          height: 73px;
        	left: 0;
          top: 0;
        	z-index: 1000;
          cursor: pointer;
        }
        
        .hamburger:before {
        	content:"\2630"; /* hamburger icon */
        	display: block;
          color: #000;
          line-height: 32px;
          font-size: 16px;
        }
        
        .openNav .hamburger:before {
        	content:"\2715"; /* close icon */
        	display: block;
          color: #000;
          line-height: 32px;
          font-size: 16px;
        }
        
        .hamburger:hover:before {
          color: #777;
        }
        
        .primary-nav .menu li {
        	position: relative;
        }
        
        .menu .icon {
        	position: absolute;
        	top: 12px;
        	right: 10px;
        	pointer-events: none;
          width: 24px;
          height: 24px;
          color: #fff;
        }
        
        .menu,
        .menu a,
        .menu a:visited {
          color: #aaa;
          text-decoration: none!important;
        	position: relative;
        }
        
        .menu a {
          display: block;
          white-space: nowrap;
          padding: 1em;
          font-si.........完整代码请登录后点击上方下载按钮下载查看