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

263
index.html
View File

@ -187,133 +187,186 @@ 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],
Disabled:false,
Suspend:function()
{
Attribute:"data-spy",
Members:[],
Defaults:[0, 1, 0, 1],
Disabled:false,
Suspend:function()
{
Spy.Disabled = true;
},
Resume:function()
{
Spy.Disabled = false;
Spy.UpdateAll();
},
UpdateAll:function()
{
var i, member, aabb, top, bottom, left, right;
var visible;
Spy.Disabled = true;
},
Resume:function()
{
Spy.Disabled = false;
Spy.UpdateAll();
},
UpdateAll:function()
{
var i, member, aabb, top, bottom, left, right;
var visible;
if(Spy.Disabled){ return; }
if(Spy.Disabled){ return; }
for(i=0; i<Spy.Members.length; i++)
for(i=0; i<Spy.Members.length; i++)
{
member = Spy.Members[i];
top = window.innerHeight * member.Bounds[0];
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 = Spy.Members[i];
top = window.innerHeight * member.Bounds[0];
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);
}
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;
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">