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

107
index.html
View File

@ -187,10 +187,10 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
}
}
};
</script>
<script>
var Spy =
{
</script>
<script>
var Spy =
{
Attribute:"data-spy",
Members:[],
Defaults:[0, 1, 0, 1],
@ -275,45 +275,98 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
window.addEventListener("resize", Spy.UpdateAll, {passive:true});
}
};
</script>
};
</script>
</head>
<body>
<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;
z-index: 10;
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">