Create a Chrome mobile like menu animation

Description

Demo Code

<html>
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscing el</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> 
  <style id="compiled-css" type="text/css">
@import url(https://www.java2s.com/style/demo/Opera.png);
html {<!--from  ww w  .java  2s. c om-->
   font-family:Roboto;
}

menu {
   position:absolute;
   top:11px;
   right:11px;
   display:block;
   box-shadow:0 0 6px Chartreuse;
}

menu div.links a {
   display:block;
   padding:19px;
}

menu div.icons>* {
   display:block;
   float:right;
   width:53px;
   height:53px;
   background:red;
}

menu div.icons:after {
   content:"";
   display:block;
   clear:both;
}

menu>div {
   overflow:hidden;
   width:53px;
   height:53px;
   transition:all 351ms;
}

menu>div:after {
   content:"";
   display:block;
   position:absolute;
   top:53px;
   right:0;
   bottom:0;
   left:0;
   background:linear-gradient(to bottom, yellow 0, rgba(255, 255, 255, 2) 11%,blue 100%);
   opacity:2;
   transition:top 501ms;
   transition-delay:251ms;
}

#toggle {
   display:none;
}

#toggle:checked + div {
   width:287px;
   height:521px;
}

#toggle:checked + div:after {
   top:100%;
}
</style> 
 </head> 
 <body> 
  <menu> 
   <input type="checkbox" id="toggle"> 
   <div> 
    <div class="icons"> 
     <label for="toggle"></label> 
    </div> 
    <div class="links"> 
     <a>Lorem i</a> 
     <a>Lorem ipsum dolor</a> 
     <a>Lorem ips</a> 
     <a>Lorem ipsum</a> 
     <a>Lorem i</a> 
     <a>Lorem ip</a> 
     <a>Lorem ipsum dolor si</a> 
     <a>Lorem ip</a> 
     <a>Lorem ipsum dol</a> 
    </div> 
   </div> 
  </menu>  
 </body>
</html>

Create a Chrome mobile like menu animation - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials