Search code examples
jqueryhtmlcss

How to add ‘a Multi-level Menu to a Hamburger menu'

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, enter image description here

but the actual output is

enter image description here

Solution

  • 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>