Skip to content

Instantly share code, notes, and snippets.

@vgdub

vgdub/nav-toggle.css

Created March 31, 2014 01:03
Show Gist options
  • Save vgdub/9883105 to your computer and use it in GitHub Desktop.
Save vgdub/9883105 to your computer and use it in GitHub Desktop.
Download ZIP
Nav Toggle Icon
Raw
nav-toggle.css
.nav_toggle{display:inline-block;position:absolute;top:0;left:0;padding:1.5em .75em;transition:.5s;cursor:pointer;-webkit-user-select:none;user-select:none;opacity:.9;}
.nav_toggle .nav_toggle__icon:before,.nav_toggle .nav_toggle__icon:after{transition:.25s}
.nav_toggle__icon{position:relative;width:2.5em;height:.25em;background:#fff;font-size:.75em;transition:.5s;border-radius:2.5em;}
.nav_toggle__icon:after,.nav_toggle__icon:before{display:block;content:"";height:.25em;width:2.5em;background:#fff;position:absolute;z-index:-1;transition:.5s .25s;border-radius:1em}
.nav_toggle__icon:after{top:-.825em}
.nav_toggle__icon:before{top:.825em}
.nav_toggle-active{left:13em;}
.nav_toggle-active:before{content:"";position:absolute;top:0;left:3.25em;width:40em;height:30em}
.nav_toggle-active .nav_toggle__icon:before,.nav_toggle-active .nav_toggle__icon:after{transition:.5s;top:0}
.nav_toggle-active .nav_toggle__icon{background:transparent;}
.nav_toggle-active .nav_toggle__icon:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.nav_toggle-active .nav_toggle__icon:before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment