Mobile Menu Animated Button

index.html

<header>
  <div class="mobile-menu">
    <div class="patty"></div>
  </div>
  <div class="menu">
    <ul>
      <li>ITEM 1</li>
      <li>ITEM 2</li>
      <li>ITEM 3</li>
    </ul>
  </div>
</header>

mobile-menu-animated-button.markdown

Mobile Menu Animated Button

A Pen by Jimmy Rose on CodePen.

License.

script.js

$('.mobile-menu').click(function(){
  $(this).find('.patty').toggleClass('active');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

header {
  width:100%;
  height:50px;
  background:#000000;
  margin:0;
  padding:0;
  position:absolute;
  top:0;
  left:0;
}

.menu {
  display:none;
}

.mobile-menu {
  width:25px;
  height:30px;
  cursor: pointer;
  float:right;
}

.patty {
  width:25px;
  background:#fff; 
  height:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  float:right;
  margin-right:15px;
  margin-top:15px;
  -webkit-transition: all 0.125s ease-in-out;
  -moz-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

.patty:before {
  content:"";
  width:25px;
  background:#fff; 
  height:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  float:right;
  margin-top:7px;
  display:block;
  -webkit-transition: all 0.125s ease-in-out;
  -moz-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

.patty:after {
  content:"";
  width:25px;
  background:#fff; 
  height:3px;
  float:right;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  margin-top:4px;
  display:block;
  -webkit-transition: all 0.125s ease-in-out;
  -moz-transition: all 0.125s ease-in-out;
  transition: all 0.125s ease-in-out;
}

.patty.active {
   transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* IE 9 */
  -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
  margin-top:20px;
}

.patty.active:before {
  transform:rotate(-90deg);
  -ms-transform:rotate(-90deg); /* IE 9 */
  -webkit-transform:rotate(-90deg); /* Opera, Chrome, and Safari */
  margin-top:0px;
}

.patty.active:after {
    transform:rotate(-90deg);
  -ms-transform:rotate(-90deg); /* IE 9 */
  -webkit-transform:rotate(-90deg); /* Opera, Chrome, and Safari */
  margin-top:-4px;
}