html 移动菜单切换按钮| http://codepen.io/agragregra/pen/bEbbmZ

Posted 2021-05-11

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

<!-- SASS -->
.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)
    
<!-- jQuery -->
$(".toggle-mnu").click(function() {
  $(this).toggleClass("on");
  $(".main-mnu").slideToggle();
  return false;
});