Add animation to the "hamburger icon".

Courtesy of Julien Melissas, ref. http://codepen.io/JulienMelissas/pen/LEBGLj

Author: Florian Kissling

docs/_includes/head.html

@@ -310,4 +310,38 @@
       padding: 30px;
     }
   }
+
+  /* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */
+  .navbar-toggle {
+    border: none;
+    background: transparent !important;
+  }
+  .navbar-toggle:hover {
+    background: transparent !important;
+  }
+  .navbar-toggle .icon-bar {
+    width: 22px;
+    transition: all 0.2s;
+  }
+  .navbar-toggle .top-bar {
+    transform: rotate(45deg);
+    transform-origin: 10% 10%;
+  }
+  .navbar-toggle .middle-bar {
+    opacity: 0;
+  }
+  .navbar-toggle .bottom-bar {
+    transform: rotate(-45deg);
+    transform-origin: 10% 90%;
+  }
+  .navbar-toggle.collapsed .top-bar {
+    transform: rotate(0);
+  }
+  .navbar-toggle.collapsed .middle-bar {
+    opacity: 1;
+  }
+  .navbar-toggle.collapsed .bottom-bar {
+    transform: rotate(0);
+  }
+
 </style>

docs/_includes/navigation.html

@@ -3,9 +3,9 @@
     <div class="navbar-header">
       <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+        <span class="icon-bar top-bar"></span>
+        <span class="icon-bar middle-bar"></span>
+        <span class="icon-bar bottom-bar"></span>
       </button>
       <a href="./" class="navbar-brand">Select2</a>
     </div>