Transition & transform

by Sparrow Squire

HTML

<a href="#" class="menu">menu</a>
<div class="panel">
  Menu panel
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

CSS

.menu {
  display: block;
  height: 30px;
  width: 30px;
  background: blue;
  text-indent: -9000px;
  transform: rotate(-45deg);
  transition: all .2s ease-out
}

  .menu.open {
    background: red;
    border-radius: 50%;
    transform: rotate(45deg);
    transition: all .2s ease-out
  }
  
 .panel {display: none}
 
   .panel.open {
     display: block;
     transition: all .2s ease-out
   }

JavaScript

$('.menu').click(function() {
	$('.menu, .panel').toggleClass('open');
});