Mobile Menu with Flex

Here is the simple menu using flex.

See the Pen NEzKJK by hari (@zenasen) on CodePen.

The explanation of the code:

To make the full height menu, the secret is flex.

What we need first is the parent to have height 100%;

html, body{
   height:100%;
   padding:0px;
   margin:0px;
}

The main point is parent (ul) should have style :
display:flex;
flex-direction:column;

flex-direction => make the li element become going to down or become a row

For the children(li)< we need to give style :
flex: 1;

flex:1 => this code make the li element have the full height of the parent with the even distribution for each li element

Standard html menu :

The Style :

html, body{
 height:100%;
 padding:0px;
 margin:0px;
}
.menu-container{
 width:350px;
 height:100%;
 background:#eee;
 padding:10px;
 box-sizing:border-box;
}
.menu{
 height:100%;
 list-style:none;
 padding-left:0px;
 margin:0px;
 display:flex;
 flex-direction:column;
 overflow-Y:scroll
}
.menu::-webkit-scrollbar {
 width:4px;
}
.menu::-webkit-scrollbar-track {
 background:rgba(0,0,0,0.3);
}
.menu::-webkit-scrollbar-thumb {
 background-color: #000;
}
.menu>li{
 border:1px solid #000;
 border-bottom:0px;
 box-sizing:border-box;
 position:relative;
 flex: 1;
 transition:all ease 0.5s;
 min-height:70px;
}
.menu>li:last-child{
 border-bottom:1px solid #000;
}
.menu>li>a{
 display:block;
 width:100%;
 height:70px;
 line-height:50px;
 padding:10px;
 box-sizing:border-box;
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 transition:all ease 0.5s;
}
span.caret{
 display:block;
 min-height:50px;
 height:100%;
 width:50px;
 background:yellow;
 position:absolute;
 top:0px;
 right:0px;
 transition:0px;
 transition:all ease 0.5s;
 cursor:pointer;
}
.menu>li.aktif>a{
 height:50px;
 line-height:30px;
 top:0px;
 transform:translateY(0%);
 z-index:3;
}
.menu>li.aktif>span.caret{
 height:50px;
 z-index:4;
}
.submenu{
 position:absolute;
 top:50px;
 max-height:0px;
 overflow:hidden;
 transition:all ease 0.5s;
 background:#00000055;
 width:100%;
 box-sizing:border-box;
}
.menu>li:nth-of-type(2) .submenu.aktif{
 max-height:126px;
}
.menu>li.aktif:nth-of-type(2){
 min-height:176px;
}
.menu>li:nth-of-type(3) .submenu.aktif{
 max-height:90px;
}
.menu>li.aktif:nth-of-type(3){
 min-height:140px;
}

The Javascript :

$( document ).ready(function() {
  $("span.caret").click(function(){
    var parent_li = $(this).parent("li");
    var submenu = $(this).next();
    if(parent_li.hasClass("aktif") === false){
      parent_li.addClass("aktif");
      setTimeout(function(){
        submenu.addClass("aktif");
      }, 500);
    }else{
      submenu.removeClass("aktif");
      setTimeout(function(){
        parent_li.removeClass("aktif");
      }, 500);
    }
  });
});