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