Mobile Menu with Flex

Here is the simple menu using flex.

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 :

<div class="menu-container">
 <ul class="menu">
<li><a href="https://www.blogger.com/u/2/null">Lipsum1</a></li>
<li>
   <a href="https://www.blogger.com/u/2/null">Lipsum2</a>
   <span class="caret"></span>
   <ul class="submenu">
<li><a href="https://www.blogger.com/u/2/null">Lipsum21</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum22</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum23</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum24</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum25</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum26</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum27</a></li>
</ul>
</li>
<li>
   <a href="https://www.blogger.com/u/2/null">Lipsum3</a>
   <span class="caret"></span>
   <ul class="submenu">
<li><a href="https://www.blogger.com/u/2/null">Lipsum21</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum22</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum23</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum24</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum25</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum4</a></li>
<li><a href="https://www.blogger.com/u/2/null">Lipsum5</a></li>
</ul>
</div>

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);
    }
  });
});

Simple Fixed Header on Srolling

With all the website project I've been working, I already seen something in common. One of those thing is a header. So, here is the 2 header with simple fixed header on scrolling.

1. Header Hide

This header is hide when we scroll the page to bottom by 50px from top, but when you scrolling up, it will shown. I like the header, since we can see all the page without disturbed by header menu, But, some time I miss the header. lol :D

Here is the code :

2. Header Shrink

This header is shrink or more tight when we scroll the page to bottom by 50px, but when you scrolling up till you reach the top, the header will grow larger. 

Here is the code :