如何将“多级菜单添加到汉堡菜单”

Question

So there's this assignment I was given to create a hamburger multi-level menu for a web page using CSS. the problem here is adding a sub-menu to make it a multi-level hamburger. below is the code snippet I have written so far for the hamburger multi-level menu

 body { margin: 0; padding: 0; /* make it look decent enough */ background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif; } a { text-decoration: none; color: #fff; transition: color 0.3s ease; } a:hover { font-weight: bold; } #menuToggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; } #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #fff; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #fff; } #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu { position: absolute; width: 300px; height: 1000px; margin: -100px 0 0 -90px; padding-top: 125px; background: #008040; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } #menu li { padding: 10px 0; font-size: 22px; } #menuToggle input:checked ~ ul { transform: none; } 

 <nav role="navigation"> <div id="menuToggle"> <!-- checkbox is used as click reciever. --> <input type="checkbox" /> <!-- spans to act as a hamburger. --> <span></span> <span></span> <span></span> <ul id="menu"> <hr> <a href="#"> <li>Home</li> </a> <hr> <a href="#"> <li>About</li> </a> <hr> <a href="#"> <li>Schedule</li> </a> <hr> </ul> </div> </nav> 

I expect the output to be something like this,

but the actual output is

Answer 1

I hope this helps

 $(function() { $('#menu > .item-submenu .submenu').click(function(){ if($('.item-submenu .sub-menu').css('display') == 'none'){ $('.item-submenu .sub-menu').css({'display':'block'}); } else { $('#menu > .item-submenu .sub-menu').css({'display':'none'}); } }); $('#menuToggle > input').click(function(){ $('#menu > .item-submenu .sub-menu').css({'display':'none'}); }); }); 

  body { margin: 0; padding: 0; /* make it look decent enough */ background: #232323; color: #cdcdcd; font-family: "Avenir Next", "Avenir", sans-serif; } a { text-decoration: none; color: #fff; transition: color 0.3s ease; } a:hover { font-weight: bold; } #menuToggle { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; } #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #fff; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #fff; } #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu { position: absolute; width: 300px; height: 1000px; margin: -100px 0 0 -90px; padding-top: 125px; background: #008040; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); } #menu li { padding: 10px 0; font-size: 22px; } #menuToggle input:checked ~ ul { transform: none; } .sub-menu li { list-style-type: none; padding: 4px!important; margin-bottom: -5px; } .sub-menu li a { font-size: 17px; } .sub-menu { display: none; margin: 0px 0 0 -41px; background: #0000002e; } .item-submenu > a:after { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\\f078"; float: right; margin-right: 10px; } .item-submenu { margin-bottom: -14px; } 

 <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav role="navigation"> <div id="menuToggle"> <!-- checkbox is used as click reciever. --> <input type="checkbox" /> <!-- spans to act as a hamburger. --> <span></span> <span></span> <span></span> <ul id="menu"> <hr> <a href="#"> <li>Home</li> </a> <hr> <li class="item-submenu"> <a href="#" class="submenu">About</a> <ul class="sub-menu"> <li><a href="#">The Organisation</a></li> <hr> <li><a href="#">The Team</a></li> </ul> </li> <hr> <a href="#"> <li>Schedule</li> </a> <hr> </ul> </div> </nav>