Skip to content

Instantly share code, notes, and snippets.

@nemerovchenko

nemerovchenko/Mobile Menu Toggle Button.markdown

Created January 18, 2016 04:17
Show Gist options
  • Save nemerovchenko/0a3fd81f833b0aebe877 to your computer and use it in GitHub Desktop.
Save nemerovchenko/0a3fd81f833b0aebe877 to your computer and use it in GitHub Desktop.
Download ZIP
Mobile Menu Toggle Button
Raw
index.html
<a href="#" class="toggle-mnu hidden-lg"><span></span></a>
Raw
script.js
$(".toggle-mnu").click(function() {
$(this).toggleClass("on");
$(".main-mnu").slideToggle();
return false;
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment