nav collapse

index.html

@@ -283,37 +283,90 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
     <style>
 nav
 {
+    border: 20px solid #0000;
+    /* margin: 20px; */
+    /* padding: 20px; */
     position: fixed;
-    display: flex;
-    flex-direction: column;
-    top:50px;
+    display: block;
+    top: 0px;
     right: 0px;
     width: 200px;
     z-index: 10;
-    height: 600px;
-    background:white;
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-    border-left:10px solid black;
+    height: 85px;
+    overflow: hidden;
+    box-shadow: 0px 3px 10px 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;
-    margin:0;
-    padding:0;
-    text-align:right;
-}
-nav > span
-{
-    margin:20px;
-    background:red;
+    position:relative;
+    padding:10px;
+    margin:32px 0 32px 0;
 }
     </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">