MATERIAL DESIGN MENU MOBILE

by shatul patil

HTML

<div style="position:relative">
  <div class="top">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/menu_smartphone_btn.png" height="35" class="menu_btn" align="left"/>
    <font style="padding-left:10px;">Material design animation</font>
  </div>

  <div id="grey_back">&nbsp;</div>

  <div id="menu_smartphone" class="menu_mobile_app">
    <ul style="overflow-y:auto;">
      <div class="background_profil"></div>
      <div class="pics_profil"></div>
      <div class="name_profil">www.wifeo.com<font style="font-weight:300; color:#999999;">/code</font></div>
      <li><a href="#">MENU 1</a></li>
      <li><a href="#">MENU 2</a></li>
      <li><a href="#">MENU 3</a></li>
      <li><a href="#">MENU 4</a></li>
    </ul>
  </div>  

  <div class="card"></div>
  <div class="card">
  <div style=" padding:5px; color:#666666; font-weight:300; font-size:37px; font-family:'Roboto';padding-top:100px;">CSS MENU<font style="font-weight:400;">ANIMATION</font></div>
  <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="parent"><div style="  color:#666666; font-weight:300; font-size:27px; font-family:'Roboto';">www.wifeo.com/code</div></a>
  </div>
</div>

CSS

html,body
{
  margin:0px;
  background-color:#e7e7e7;
}

#menu_smartphone {
  height:100%;  
  position:fixed;
  background:#ffffff;
  top:0;
  bottom:0;
  left:-570px;
  width:570px;
  z-index:9999;
} 
#menu_smartphone ul {
  padding:0;
  margin:0;
  list-style:none;
  color:#999999;
} 
#menu_smartphone ul li {
  height:70px;
  padding-left:10px;
  line-height:70px;
} 
#menu_smartphone ul li:hover {
  background:#f7f7f7;     
}
#menu_smartphone ul li a {
  color:#999999;
  text-decoration: none;
  font-family:'Roboto';
  font-weight: 400;
  font-size:25px;
}
.background_profil
{
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/fond_menu_mobile.png);
  height: 240px;
}
.pics_profil
{
  width: 130px;
  height: 130px;
  border-radius:50%;
  background-size: cover;
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/img_welcome.png);
  margin-top: -65px;
}
.name_profil
{
  font-size: 37px;
  font-family: 'Roboto';
  font-weight: 400;
  color: #666666;
  margin-top: -50px;
  margin-left: 140px;
  margin-bottom: 40px;
}
.top
{
  background-color:#e51c23;
  height: 70px;
  position: fixed;
  top: 0px;
  width: 100%;
  line-height: 70px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Roboto';
  padding-left: 10px;
}
#grey_back {
  display:none;
  background-color:#000000;
  opacity:0.7;
  width:100%;
  height:100%;
  z-index:9998;
  position:fixed;
  top:0;
}
.card
{
  height:300px;
  background-color:#ffffff;
  margin:10px;
  padding: 20px;
  color:#666666;
  font-weight: 300;
  font-size: 36px;
  text-align: center;
  font-family: 'Roboto';
  box-shadow:0 0 2px #999999;
}
.menu_btn
{
  cursor: pointer;
  left:0px;
  margin-top: 16px;
}

JavaScript

$(document).ready(function() 
{
    var isMenuOpen = false;
 
    $('.menu_btn').click(function()
    {
        if (isMenuOpen == false)
        {
            $("#menu_smartphone").clearQueue().animate({
                left : '0px' 
            })            
      $("#grey_back").fadeIn('fast');
            $(this).fadeOut(200);
            $(".close").fadeIn(300);
             
            isMenuOpen = true;
        } 
    });     
    $('#grey_back').click(function()
    {
        if (isMenuOpen == true)
        {
            $("#menu_smartphone").clearQueue().animate({
                left : '-570px'
            })
            $("#page").clearQueue().animate({
                "margin-left" : '0px'
            })            
      $("#grey_back").fadeOut('fast');
            $(this).fadeOut(200);
            $(".menu_btn").fadeIn(300);
             
            isMenuOpen = false;
        }
    });
});