css only, animated menu icon

_src/_assets/styl/hamburger.styl

@@ -0,0 +1,47 @@
+.hamburger
+    @extend .transition
+    width: 18px
+    height: 18px
+    position: relative
+    transform: rotate(0deg)
+    cursor: pointer
+    margin-top: 6px
+
+    span
+        @extend .transition
+        display: block
+        position: absolute
+        height: 3px
+        width: 100%
+        background: $text-color-light
+        border-radius: 20px
+        opacity: 1
+        left: 0
+        transform: rotate(0deg)
+
+        &:nth-child(1)
+            top: 0px
+            transform-origin: left center
+
+        &:nth-child(2)
+            top: 5px
+            transform-origin: left center
+
+        &:nth-child(3)
+            top: 10px
+            transform-origin: left center
+
+
+        // open state
+        .has-menu-open &
+            &:nth-child(1)
+                transform: rotate(45deg)
+                top: -1px
+
+            &:nth-child(2)
+                width: 0%
+                opacity: 0
+
+            &:nth-child(3)
+                transform: rotate(-45deg)
+                top: 12px

_src/_assets/styl/icons.styl

@@ -6,12 +6,12 @@
 
 svg
     &.icon
+        @extend .transition
         height: 20px
         width: 20px
         display: inline-block
         fill: $text-color-light
         vertical-align: baseline
-        transition: all .2s ease-in-out
 
         .btn &
             height: 18px

_src/_assets/styl/kremalicious3.styl

@@ -41,6 +41,7 @@
 // Components
 @import 'header'
 @import 'navigation'
+@import 'hamburger'
 @import 'search'
 @import 'tooltips'
 @import 'footer'

_src/_assets/styl/navigation.styl

@@ -18,14 +18,12 @@
     &:focus
         outline: 0
 
-    .icon
+    &:hover,
-        &.icon-entypo-menu
+    &:focus
-            width: 24px
+        .icon
-            height: 24px
+            fill: $link-color
-
+        .hamburger span
-    &:hover .icon,
+            background: $link-color
-    &:focus .icon
-        fill: $link-color
 
     &:active
         background: transparent
@@ -33,6 +31,8 @@
 
         .icon
             fill: darken($link-color, 30%)
+        .hamburger span
+            background: darken($link-color, 30%)
 
 .menu-btn
     margin-right: -.5em

_src/_includes/header.html

@@ -13,10 +13,11 @@
 
                 <nav role="navigation" class="nav-main grid__col">
                     <button type="button" class="menu-btn" data-toggle="tooltip" title="Menu">
-                        <svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
+                        <div class="hamburger">
-                            <title id="title">Menu</title>
+                            <span></span>
-                            <use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
+                            <span></span>
-                        </svg>
+                            <span></span>
+                        </div>
                     </button>
                 </nav>
 

gulpfile.js

@@ -60,7 +60,7 @@ var ICONS = {
         dist: DIST + '/assets/img/',
         prefix: 'entypo-',
         icons: [
-            'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
+            'twitter', 'facebook', 'google+', 'magnifying-glass', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
         ]
     }
 }