Skip to content

Instantly share code, notes, and snippets.

@juanlopezdev
Last active May 2, 2016 17:37
Show Gist options
  • Select an option

  • Save juanlopezdev/83da41aa46d1a557877d to your computer and use it in GitHub Desktop.

Select an option

Save juanlopezdev/83da41aa46d1a557877d to your computer and use it in GitHub Desktop.
SASS Menu Toggle for Mobile Screen By joseluisq
/*
* Menu Toggle
* By Jose Luis Quintana -> https://gist.github.com/joseluisq/a6ef185322e9efa16dd9
*/
#menu-toggle {
position: fixed;
display: block;
top: 0;
left: 0;
background: #000;
background: rgba(0, 0, 0, .7);
font-size: 11px;
z-index: 10;
width: 4em;
height: 4em;
padding: 1em;
span,
span:before,
span:after {
background-color: #fff;
width: 100%;
height: .2em;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
span {
display: block;
margin-top: .9em;
position: relative;
}
span:before,
span:after {
content: ' ';
left: 0;
position: absolute;
top: -.55em;
}
span:after {
top: .55em;
}
/* Active state */
&.active {
span {
background: rgba(0, 0, 0, 0);
}
span:before {
-webkit-transform: rotate(45deg) translate(.5em, .4em);
-moz-transform: rotate(45deg) translate(.5em, .4em);
-ms-transform: rotate(45deg) translate(.5em, .4em);
-o-transform: rotate(45deg) translate(.5em, .4em);
transform: rotate(45deg) translate(.5em, .4em);
}
span:after {
-webkit-transform: rotate(-45deg) translate(.4em, -.3em);
-moz-transform: rotate(-45deg) translate(.4em, -.3em);
-ms-transform: rotate(-45deg) translate(.4em, -.3em);
-o-transform: rotate(-45deg) translate(.4em, -.3em);
transform: rotate(-45deg) translate(.4em, -.3em);
}
}
}
/*
* Mode use:
<div id="menu-toggle">
<span></span>
</div>
*
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment