Skip to content

Instantly share code, notes, and snippets.

@agragregra

agragregra/mobile-menu.html

Created December 1, 2015 14:42
Show Gist options
  • Save agragregra/eb89e4425442b559207c to your computer and use it in GitHub Desktop.
Save agragregra/eb89e4425442b559207c to your computer and use it in GitHub Desktop.
Download ZIP
Mobile Menu Toggle Button | http://codepen.io/agragregra/pen/bEbbmZ
Raw
mobile-menu.html
<!-- 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;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment