Mobile Menu Toggle Button

index.html

<a href="#" class="toggle-mnu hidden-lg"><span></span></a>
  

Mobile Menu Toggle Button.markdown

Mobile Menu Toggle Button

A Pen by Алексей on CodePen.

License.

script.js

$(".toggle-mnu").click(function() {
  $(this).toggleClass("on");
  $(".main-mnu").slideToggle();
  return false;
});

scripts

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

style.sass

body
  background-color: #333

.toggle-mnu 
  display: block
  width: 28px
  height: 28px
  margin-top: 14px

  span:after, span:before 
    content: ""
    position: absolute
    left: 0
    top: 9px

  span:after
    top: 18px

  span 
    position: relative
    display: block

  span, span:after, span:before
    width: 100%
    height: 2px
    background-color: #fff
    transition: all 0.3s
    backface-visibility: hidden
    border-radius: 2px


  &.on span 
    background-color: transparent

  &.on span:before 
    transform: rotate(45deg) translate(-1px, 0px)

  &.on span:after 
    transform: rotate(-45deg) translate(6px, -7px)