Skip to content

Instantly share code, notes, and snippets.

@user44

user44/mobile menu button 2

Last active October 13, 2016 16:31
Show Gist options
  • Save user44/f906775dc4b54de58d1bde269900b624 to your computer and use it in GitHub Desktop.
Save user44/f906775dc4b54de58d1bde269900b624 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mobile menu button 2
HTML
<span class="navbutton"> <em></em> <em></em> <em></em> </span>
SASSS
.navbutton
display: block
position: absolute
top: 24px
right: 20px
width: 35px
height: 25px
cursor: pointer
&.active
em
opacity: 0
background-color: #fff
transition: opacity .2s，background-color .2s
&:first-child
opacity: 1
transform: rotate(45deg)
top: 10px
transition: background-color .2s,transform .2s .3s,top .2s
&:last-child
opacity: 1
transform: rotate(-45deg)
top: 10px
transition: background-color .2s,transform .2s .3s,top .2s
em
position: absolute
top: 10px
left: 0
width: 100%
height: 4px
border-radius: 2px
background-color: #fff
opacity: 1
transition: opacity .2s,background-color .2s .7s
&:first-child
top: 0
transform: rotate(0deg)
transition: transform .2s,top .2s .3s,background-color .2s .7s
&:last-child
top: 20px
transform: rotate(0deg)
transition: transform .2s,top .2s .3s,background-color .2s .7s
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment