SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nav collapse

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-10 11:59:33 -04:00
parent a1011b18f9
commit dbc82b0711
1 changed files with 159 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
index.html
View File

@ -283,37 +283,90 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
<style> <style>
nav nav
{ {
border: 20px solid #0000;
/* margin: 20px; */
/* padding: 20px; */
position: fixed; position: fixed;
display: flex; display: block;
flex-direction: column; top: 0px;
top:50px;
right: 0px; right: 0px;
width: 200px; 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 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> </style>
<nav> <nav>
<span></span> <span class="cap cap--top"></span>
<span class="cap cap--bottom"></span>
<span class="edge"></span>
<ul> <ul>
<li><a href="#top" >Top</a></li> <li><a href="#top" >Top</a></li>
<li><a href="#order">Order</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="#specs">Specs</a></li>
<li><a href="#email">Sign-up</a></li> <li><a href="#email">Sign-up</a></li>
</ul> </ul>
<span></span>
</nav> </nav>
<main> <main>
<section id="order"> <section id="order">