jonahstuart/Fully-animated-menu-icon.markdown

## Fully-animated-menu-icon.markdown

      
    Raw
  

              Fully-animated-menu-icon.markdown
            
          
    Fully animated menu icon

Hover and click states for a persistent hamburger icon. Hover staggers the lines, while clicking turns it into the close icon for the menu overlay. Javascript is only there to hold the open state.
Could probably adapt this to a single element in the future.
A little ditty I pulled together a few months ago for my personal site that I kept forgetting to share. Check it in the environment here: http://jonahstuart.com
A Pen by Jonah Stuart on CodePen.
License.

  
## index.html
<body>
  <div class="nav-tab">
	  <a id="hamburger">
	    <span class="first-child">&nbsp;</span>
	    <span class="second-child">&nbsp;</span>
	    <span class="third-child">&nbsp;</span>
	    <span class="fourth-child">&nbsp;</span>
	  </a>
	</div>
</body>

## script.js
openMobileNav = function(e) {
  $("body").toggleClass("open");
};

$(".nav-tab").click(openMobileNav);

## style.sass

// Animate all the things
*
  transition: all ease-in-out .4s
  -webkit-transition: all ease-in-out .4s

// Hamburger styles
.nav-tab
  width: 30px
  height: 40px
  a
    cursor: pointer
    display: block
    height: 100%
    width: 100%
  span
    background: #e1e7f4
    display: block
    width: 30px
    height: 4px
    margin-bottom: 3px
  // Hamburger animate on hover
  &:hover
    span
      &.first-child
        width: 26px
      &.second-child
        width: 18px
      &.third-child
        width: 22px
      &.fourth-child
        width: 24px

// Click to open
body.open .nav-tab
  span
    &.first-child
      width: 30px
      margin-top: 11px
      transform: rotate(-45deg)
      -webkit-transform: rotate(-45deg)
    &.second-child
      width: 0px
      opacity: 0
    &.third-child
      width: 0px
      opacity: 0
    &.fourth-child
      width: 30px
      margin-top: -21px
      transform: rotate(45deg)
      -webkit-transform: rotate(45deg)

// Background
body
  height: 100%
  width: 100%
  background-color: #3f404f

// Position nav-tab
.nav-tab
  position: absolute
  left: 50%
  margin-left: -20px
  top: 50%
  margin-top: -15px
	<body>
	<div class="nav-tab">
	<a id="hamburger">
	<span class="first-child"> </span>
	<span class="second-child"> </span>
	<span class="third-child"> </span>
	<span class="fourth-child"> </span>
	</a>
	</div>
	</body>
	openMobileNav = function(e) {
	$("body").toggleClass("open");
	};

	$(".nav-tab").click(openMobileNav);

	// Animate all the things
	*
	transition: all ease-in-out .4s
	-webkit-transition: all ease-in-out .4s

	// Hamburger styles
	.nav-tab
	width: 30px
	height: 40px
	a
	cursor: pointer
	display: block
	height: 100%
	width: 100%
	span
	background: #e1e7f4
	display: block
	width: 30px
	height: 4px
	margin-bottom: 3px
	// Hamburger animate on hover
	&:hover
	span
	&.first-child
	width: 26px
	&.second-child
	width: 18px
	&.third-child
	width: 22px
	&.fourth-child
	width: 24px

	// Click to open
	body.open .nav-tab
	span
	&.first-child
	width: 30px
	margin-top: 11px
	transform: rotate(-45deg)
	-webkit-transform: rotate(-45deg)
	&.second-child
	width: 0px
	opacity: 0
	&.third-child
	width: 0px
	opacity: 0
	&.fourth-child
	width: 30px
	margin-top: -21px
	transform: rotate(45deg)
	-webkit-transform: rotate(45deg)

	// Background
	body
	height: 100%
	width: 100%
	background-color: #3f404f

	// Position nav-tab
	.nav-tab
	position: absolute
	left: 50%
	margin-left: -20px
	top: 50%
	margin-top: -15px