Animated side menu

cassiozen · cassiozen · commit d2f462d93328 · 2016-01-28T04:50:01.000-02:00
diff --git a/materials/appendixA/index.html b/materials/appendixA/index.html
@@ -13,6 +13,7 @@
   <body>
     <header>
       <button id="menu"><svg height="32px" viewBox="0 0 32 32" width="32px"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg></button>
+      <span>Pro React - Appendix A</span>
     </header>
     <nav>
       <a href="http://www.pro-react.com">
diff --git a/materials/appendixA/main.js b/materials/appendixA/main.js
@@ -2,10 +2,10 @@ var navVisible = false;
 $('#menu').click(function(e){
   if(navVisible){
     navVisible = false;
-    $('nav').hide();
+    $('nav').removeClass('open');
   } else {
     navVisible = true;
-    $('nav').show();
+    $('nav').addClass('open');
   }
 });
 
@@ -20,8 +20,8 @@ $(window).on('resize', function(){
 
 function moveNavigation(){
   if($(window).width()>1023){
-    $('nav').show();
-    navVisible = true;
+    $('nav').removeClass('open');
+    navVisible = false;
 
   }
   resizing = false;
diff --git a/materials/appendixA/styles.css b/materials/appendixA/styles.css
@@ -140,6 +140,20 @@ header button svg {
     fill: #ffffff;
 }
 
+header span{
+  display: block;
+  position: absolute;
+  top: 20%;
+  transform: translateY(-50%);
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Montserrat', "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: #fff;
+}
+
 main {
   width: calc(100% - 270px);
   margin-left: 270px;
@@ -167,14 +181,19 @@ and (max-width : 1023px) {
     display: block;
     position: fixed;
     width: 100%;
-    background-color: #ffc424;
+    background-color: #f3bb22;
     padding-left: 5px;
     z-index: 10;
   }
 
   nav {
     margin-top: 40px;
-    display: none;
+    transform: translateX(-100%);
+    transition: transform .5s;
+  }
+
+  nav.open {
+    transform: translateX(0)
   }
 
   main {
