Add a menu button in the mobile view

WasabiFan · WasabiFan · commit 063cd9ced204 · 2014-08-25T13:58:19.000-07:00
diff --git a/_includes/head.html b/_includes/head.html
@@ -7,6 +7,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="{{ site.github.url }}/javascripts/respond.js"></script>
     <script src="{{ site.github.url }}/javascripts/cards.js"></script>
+    <script src="{{ site.github.url }}/javascripts/menu.js"></script>
     <!--[if lt IE 9]>
       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,5 +1,9 @@
-<div id="header">
+<div id="header" class="mobile-hidden">
     <nav>
+        <li class="nav-menu">
+            <img src="{{ site.github.url }}/images/menu.png" />
+        </li>
+
         <li class="left button">
             <a href="{{ site.github.url }}/" title="There's no place like Home...">Home</a>
         </li>
diff --git a/images/menu.png b/images/menu.png
diff --git a/javascripts/menu.js b/javascripts/menu.js
@@ -0,0 +1,18 @@
+﻿$(document).ready(function () {
+    var headerHeight = $('#header').height();
+
+    $('.nav-menu').click(function () {
+        if ($('#header').height() <= 50) {
+
+            $('#header').removeClass('mobile-hidden');
+            $('#header').animate({ height: 396 }, 400, function () {
+                $('#header').height('auto');
+            });
+        }
+        else
+            $('#header').animate({ height: headerHeight }, 400, 'swing', function () {
+                $('#header').addClass('mobile-hidden');
+                $('#header').css('height', '');
+            });
+    });
+});
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -814,6 +814,17 @@ dt {
   box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0);
 }
 
+.nav-menu {
+  list-style: none;
+  display: none;
+  line-height: 50px;
+  height: 50px;
+  padding: 8px 6px;
+
+  cursor: pointer;
+  float: right;
+}
+
 #header nav li.left {
   float: left; 
   margin-right: 6px;
@@ -1009,58 +1020,54 @@ section #title p {
     display: block;
   }
 }
+
 @media print, screen and (max-width: 590px) {
-  #header {
-      margin: 0 auto;
-      position: relative;
-      padding: 0 20px;
-
-      height: auto;
-      width: auto;
-
-      left: auto;
-      top: auto;
-      right: auto;
-
-      background: none;
-      border: none;
-      -moz-box-shadow: none;
-      -webkit-box-shadow: none;
-      -o-box-shadow: none;
-      box-shadow: none;
-  }
+    #header {
+        margin: -20px auto 0 auto;
+        position: relative;
+        padding: 0 20px;
+        height: 50px;
+        width: auto;
+        left: auto;
+        top: auto;
+        right: auto;
+    }
 
-  section {
-      margin-top: 10px;
-  }
+    section {
+        margin-top: 10px;
+    }
 
-  #header nav {
-      padding: 0 0 0 0;
-      margin: 0 26px 0 0;
-  }
+    #header nav {
+        padding: 0 0 0 0;
+        margin: 0 0 0 0;
+    }
 
-      #header nav .button {
-          float: none !important;
-          display: block;
-          margin-left: 0 !important;
-          margin-right: 0 !important;
-      }
+        #header nav .button {
+            float: none !important;
+            display: block;
+            margin-left: 0 !important;
+            margin-right: 26px !important;
+        }
 
         #header nav > .right {
             padding-top: 30px;
         }
 
-        #header nav > .right ~ .right {
-            padding-top: 0;
+            #header nav > .right ~ .right {
+                padding-top: 0;
+            }
+
+        #header nav .button a {
+            width: 100%;
         }
 
-            #header nav .button a {
-                width: 100%;
-            }
+    .nav-menu {
+        display: inline;
+    }
 
-      /*#header nav .button.right {
-          display: none;
-      }*/
+    #header.mobile-hidden nav .button {
+        display: none;
+    }
 }
 
 :target {
