nav collapse
This commit is contained in:
parent
a1011b18f9
commit
dbc82b0711
265
index.html
265
index.html
@ -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;
|
||||
|
||||
if(Spy.Disabled){ return; }
|
||||
|
||||
for(i=0; i<Spy.Members.length; i++)
|
||||
{
|
||||
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; }
|
||||
|
||||
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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user