nav collapse

index.html

@@ -187,133 +187,186 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
             }
         }
     };
-    </script>
+</script>
-    <script>
+<script>
-    var Spy =
+var Spy =
+{
+    Attribute:"data-spy",
+    Members:[],
+    Defaults:[0, 1, 0, 1],
+    Disabled:false,
+    Suspend:function()
     {
-        Attribute:"data-spy",
+        Spy.Disabled = true;
-        Members:[],
+    },
-        Defaults:[0, 1, 0, 1],
+    Resume:function()
-        Disabled:false,
+    {
-        Suspend:function()
+        Spy.Disabled = false;
+        Spy.UpdateAll();
+    },
+    UpdateAll:function()
+    {
+        var i, member, aabb, top, bottom, left, right;
+        var visible;
+
+        if(Spy.Disabled){ return; }
+
+        for(i=0; i<Spy.Members.length; i++)
         {
-            Spy.Disabled = true;
+            member = Spy.Members[i];
-        },
+
-        Resume:function()
+            top =    window.innerHeight * member.Bounds[0];
-        {
+            bottom = window.innerHeight * member.Bounds[1];
-            Spy.Disabled = false;
+            left =   window.innerWidth *  member.Bounds[2];
-            Spy.UpdateAll();
+            right =  window.innerWidth *  member.Bounds[3];
-        },
+
-        UpdateAll:function()
+            aabb = member.Element.getBoundingClientRect();
-        {
+            visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
-            var i, member, aabb, top, bottom, left, right;
+            if(visible != member.Visible)
-            var visible;
-    
-            if(Spy.Disabled){ return; }
-    
-            for(i=0; i<Spy.Members.length; i++)
             {
-                member = Spy.Members[i];
+                member.Element.setAttribute(Spy.Attribute, visible);
-    
+                member.Visible = visible;
-                top =    window.innerHeight * member.Bounds[0];
+                member.Change(visible);
-                bottom = window.innerHeight * member.Bounds[1];
-                left =   window.innerWidth *  member.Bounds[2];
-                right =  window.innerWidth *  member.Bounds[3];
-    
-                aabb = member.Element.getBoundingClientRect();
-                visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
-                if(visible != member.Visible)
-                {
-                    member.Element.setAttribute(Spy.Attribute, visible);
-                    member.Visible = visible;
-                    member.Change(visible);
-                }
             }
-        },
-        Create:function(inElement)
-        {
-            var j, bounds;
-            var attr;
-            var obj;
-            attr = inElement.getAttribute(Spy.Attribute)||"";
-            inElement.removeAttribute(Spy.Attribute);
-            bounds = attr.split("|");
-            for(j=0; j<Spy.Defaults.length; j++)
-            {
-                if(bounds[j])
-                {
-                    bounds[j] = parseFloat(bounds[j]);
-                }
-                else
-                {
-                    bounds[j] = Spy.Defaults[j];
-                }
-            }
-            obj = {
-                Element:inElement,
-                Bounds:bounds,
-                Visible:undefined,
-                Change:function(){}
-            };
-            Spy.Members.push(obj);
-            return obj;
-        },
-        CreateAll:function()
-        {
-            var i, elements;
-            elements = document.querySelectorAll("*["+Spy.Attribute+"]");
-    
-            for(i=0; i<elements.length; i++)
-            {
-                Spy.Create(elements[i]);
-            }
-        },
-        Init:function()
-        {
-            Spy.CreateAll();
-            Spy.UpdateAll();
-            document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
-            window.addEventListener("resize", Spy.UpdateAll, {passive:true});
         }
-    };
+    },
-    </script>
+    Create:function(inElement)
+    {
+        var j, bounds;
+        var attr;
+        var obj;
+        attr = inElement.getAttribute(Spy.Attribute)||"";
+        inElement.removeAttribute(Spy.Attribute);
+        bounds = attr.split("|");
+        for(j=0; j<Spy.Defaults.length; j++)
+        {
+            if(bounds[j])
+            {
+                bounds[j] = parseFloat(bounds[j]);
+            }
+            else
+            {
+                bounds[j] = Spy.Defaults[j];
+            }
+        }
+        obj = {
+            Element:inElement,
+            Bounds:bounds,
+            Visible:undefined,
+            Change:function(){}
+        };
+        Spy.Members.push(obj);
+        return obj;
+    },
+    CreateAll:function()
+    {
+        var i, elements;
+        elements = document.querySelectorAll("*["+Spy.Attribute+"]");
+
+        for(i=0; i<elements.length; i++)
+        {
+            Spy.Create(elements[i]);
+        }
+    },
+    Init:function()
+    {
+        Spy.CreateAll();
+        Spy.UpdateAll();
+        document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
+        window.addEventListener("resize", Spy.UpdateAll, {passive:true});
+    }
+};
+</script>
 </head>
 <body>
 
     <style>
 nav
 {
+    border: 20px solid #0000;
+    /* margin: 20px; */
+    /* padding: 20px; */
     position: fixed;
-    display: flex;
+    display: block;
-    flex-direction: column;
+    top: 0px;
-    top:50px;
     right: 0px;
     width: 200px;
-    z-index:10;
+    z-index: 10;
-    height: 600px;
+    height: 85px;
-    background:white;
+    overflow: hidden;
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 3px 10px black;
-    border-left:10px solid black;
+    transition: height 0.4s;
+    box-sizing: border-box;
 }
-nav > *
+nav:hover{
+    height:100%;
+}
+nav > span.cap
 {
-    flex: 1;
+    display:block;
+    position:absolute;
+    left:0;
+    width:100%;
+    height:33px;
+}
+nav > span.cap--top
+{
+    top:0;
+}
+nav > span.cap--bottom
+{
+    bottom:0;
+}
+nav > span.cap::before
+{
+    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;
+}
+nav > span.edge
+{
+    border: 30px solid transparent;
+    border-right: 0px;
+    content: " ";
+    display: block;
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+
+    box-sizing: border-box;
+}
+nav > span.edge::before
+{
+    content:" ";
+    display:block;
+    position:absolute;
+    top:0;
+    left:-16px;
+    width:5px;
+    height:100%;
+    background:black;
 }
 nav > ul
 {
-    flex:0;
+    position:relative;
-    margin:0;
+    padding:10px;
-    padding:0;
+    margin:32px 0 32px 0;
-    text-align:right;
-}
-nav > span
-{
-    margin:20px;
-    background:red;
 }
     </style>
     <nav>
-        <span></span>
+        <span class="cap cap--top"></span>
+        <span class="cap cap--bottom"></span>
+        <span class="edge"></span>
         <ul>
             <li><a href="#top"  >Top</a></li>
             <li><a href="#order">Order</a></li>
@@ -322,7 +375,7 @@ nav > span
             <li><a href="#specs">Specs</a></li>
             <li><a href="#email">Sign-up</a></li>
         </ul>
-        <span></span>
+
     </nav>
     <main>
     <section id="order">