From 61ee90400e4f72c0db3605ec1ecb5a579cf91430 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Fri, 13 Aug 2021 13:45:22 -0400
Subject: [PATCH] nav animation

---
 index.html | 217 +++++++++++++++++++++++++++--------------------------
 1 file changed, 110 insertions(+), 107 deletions(-)
diff --git a/index.html b/index.html
index 12c6a58..a5937b3 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" >
 <meta charset="utf-8">
 <style>
 
@@ -26,7 +27,7 @@ section
     position:relative;
     height: 100vh;
     box-sizing: border-box;
-    padding:50px;
+    padding:20px;
 }
 
 
@@ -35,7 +36,8 @@ h2
     display:flex;
     align-items: center;
     box-sizing:border-box;
-    width:500px;
+    width:100%;
+    max-width:500px;
     margin:0 auto;
     padding:5px 20px 5px 20px;
     text-align:center;
@@ -283,90 +285,135 @@ var Spy =
     <style>
 nav
 {
-    border: 20px solid #0000;
-    /* margin: 20px; */
-    /* padding: 20px; */
+    /* margin: 7px; */
+    /* padding: 10px; */
     position: fixed;
     display: block;
-    top: 0px;
+    bottom: 0;
     right: 0px;
     width: 200px;
     z-index: 10;
-    height: 85px;
+    height: 66px;
     overflow: hidden;
-    box-shadow: 0px 3px 10px black;
     transition: height 0.4s;
-    box-sizing: border-box;
+    /* box-sizing: border-box; */
 }
-nav:hover{
-    height:100%;
-}
-nav > span.cap
+nav > .detail
 {
     display:block;
     position:absolute;
-    left:0;
+    width:33px;
+    right:0;
+    transition: width 0.4s 0.4s;
+}
+
+[nav-open] nav
+{
+    height:100%;
+}
+[nav-open] nav > .detail
+{
     width:100%;
+
+}
+nav > .detail.cap
+{
     height:33px;
 }
-nav > span.cap--top
+nav > .detail.cap--top
 {
-    top:0;
+    top:10px;
 }
-nav > span.cap--bottom
+nav > .detail.cap--bottom
 {
-    bottom:0;
+    bottom:10px;
 }
-nav > span.cap::before
+nav > .detail.cap::before
 {
+    position: relative;
+    left: -10px;
     content: "⬦";
     line-height: 37px;
     font-size: 60px;
-    font-weight:900;
-    text-indent:-10px;
-    display: block;
-    position: relative;
-    top: 0px;
-    width: 0%;
-    height: 31px;
-    background: #000;
-    transition: width 0.4s;
+    font-weight: 900;
+    text-indent: -10px;
 }
-nav > span.edge
+nav > .detail.edge
 {
-    border: 30px solid transparent;
+    border: 40px solid transparent;
     border-right: 0px;
+    border-left: 0px;
+    content: " ";
+    height: 100%;
+    box-sizing: border-box;
+}
+nav > .detail.edge::before
+{
     content: " ";
     display: block;
     position: absolute;
-
-    width: 100%;
+    top: 0;
+    left: 14px;
+    width: 5px;
     height: 100%;
-
-    box-sizing: border-box;
+    background: #000;
 }
-nav > span.edge::before
+nav .button
 {
-    content:" ";
+    position: absolute;
+    bottom: 0;
+    left:0%;
+    display: block;
+    width: 100%;
+    height: 66px;
+    transition: left 0.4s 0.4s;
+}
+nav .button::before, nav .button::after
+{
+    
     display:block;
     position:absolute;
-    top:0;
-    left:-16px;
-    width:5px;
-    height:100%;
-    background:black;
+    top:20px;
+    left:0;
+    width:100%;
+    text-align: center;
+    text-transform:uppercase;
+    font-weight:900;
+}
+nav .button::before
+{
+    content:"Menu";
+}
+nav .button::after
+{
+    content:"Close";
+    left:-100%;
+}
+[nav-open] nav .button
+{
+    left:100%;
 }
 nav > ul
 {
-    position:relative;
-    padding:10px;
-    margin:32px 0 32px 0;
+    position: absolute;
+    padding: 31px;
+    margin: 0;
+    top: 50vh;
+    left:100%;
+    width:100%;
+    transform: translateY(-50%);
+    transition:left 0.4s 0.5s;
+}
+[nav-open] nav > ul
+{
+    left:0%;
 }
     </style>
     <nav>
-        <span class="cap cap--top"></span>
-        <span class="cap cap--bottom"></span>
-        <span class="edge"></span>
+        <span class="detail edge"></span>
+        <span class="detail cap cap--top"></span>
+        <span class="detail cap cap--bottom"></span>
+
         <ul>
             <li><a href="#top"  >Top</a></li>
             <li><a href="#order">Order</a></li>
@@ -376,70 +423,11 @@ nav > ul
             <li><a href="#email">Sign-up</a></li>
         </ul>
 
+        <span class="button"></span>
     </nav>
     <main>
     <section id="order">
 
-        <style>
-            .shot3d
-            {
-                transform: perspective(1000px) rotateY(25deg);
-                transform-style: preserve-3d;
-                perspective-origin: 50% 50%;  
-
-                position: relative;
-                      width: 350px;
-                     height: 350px;
-                line-height: 350px;
-
-                text-align:center;
-                white-space: nowrap;
-            }
-            
-            .shot3d__shadow
-            {
-                display: inline;
-                position: relative;
-
-                outline: 2px solid blue;
-                font-size: 0px;
-                line-height:0;
-                vertical-align: bottom;
-            }
-            .shot3d__shadow::after, .shot3d__shadow::before
-            {
-                transform-origin: center 30px;
-                position: absolute;
-                padding: 0 6px 0 6px;
-                content: " ";
-                top: 100%;
-                left: -6px;
-                width: 100%;
-                height: 6px;
-                border-radius: 6px;
-                box-shadow: 0px 30px 14px black, 0px 43px 22px black, 0px 60px 33px black;
-            }
-
-            .shot3d__shadow::before{ transform: translateY(-30px) rotateX(-90deg) translateY( 5px); }
-            .shot3d__shadow::after { transform: translateY(-30px) rotateX( 90deg) translateY( 5px); }
-
-            .shot3d__shadow img
-            {
-                vertical-align: bottom;
-                display: inline;
-                max-width: 100%;
-                max-height: 100%;
-            }
-
-        </style>
-
-        <div class="shot3d">
-            <div class="shot3d__shadow">
-                <img class="panel panel--front" src="https://placekitten.com/400/800"/>
-            </div>
-        </div>
-
-
         <h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
         <h3>Truth For Life</h3>
         <h4>365 Daily Devotionals</h4>
@@ -486,6 +474,21 @@ nav > ul
     </section>
     </main>
 <script>
+
+
+function $(inSelector){ return document.querySelectorAll(inSelector); }
+$("nav .button")[0].addEventListener("click", function()
+{
+    if(document.body.hasAttribute("nav-open"))
+    {
+        document.body.removeAttribute("nav-open");
+    }
+    else
+    {
+        document.body.setAttribute("nav-open", true);
+    }
+})
+
 Spy.Init();
 function JobDuration(inDuration, inHandler, inDone)
 {
