Material menu

by Aakash Khapare M

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot;       rel=&quot;stylesheet&quot;&gt;"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<nav>
  <button class="btn btn-primary btn-fab" id="btn-menu">
    <i class="material-icons menu"> menu </i>
    <i class="material-icons close"> close </i>
   </button>
</nav>

CSS

nav{
  animation-name: contract;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
nav.open{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  box-shadow: rgba(0,0,0,0.26) 5px 0px 8px;
  animation-name: expand;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes expand{
  from{
    width: 0;
    height: 0;
    border-radius: 50%;
  }
  to{
    width: 300px;
    height: 100%;
    border-radius: 0;
  }
}
@keyframes contract{
  to{
    width: 0;
    height: 0;
    border-radius: 50%;
  }
  from{
    width: 300px;
    height: 100%;
    border-radius: 0;
  }
}
nav.open > #btn-menu{
  box-shadow: none;
  background-color: #fff;
  color: #009688;
}
nav.open > #btn-menu > .menu,
nav > #btn-menu > .close{
  display: none;
}
nav > #btn-menu > .menu,
nav.open > #btn-menu > .close{
  display: block;
}

JavaScript

$("#btn-menu").click(function(){
	$('nav').toggleClass('open');
})