Untitled

dabblet.css

@keyframes slideDown1 {
	0% { height: 0; }
	100% { height: 1em; }
}
@keyframes slideDown2 {
	0% { height: 0; }
	100% { height: 2em;	}
}
@keyframes slideDown3 {
	0% { height: 0;	}
	100% { height: 3em;	}
}
@keyframes slideDown4 {
	0% { height: 0;	}
	100% { height: 4em;	}
}
@keyframes slideDown5 {
	0% { height: 0;	}
	100% { height: 5em;	}
}
@keyframes slideDown6 {
	0% { height: 0;	}
	100% { height: 6em;	}
}
@keyframes slideDown7 {
	0% { height: 0;	}
	100% { height: 7em;	}
}
@keyframes slideDown8 {
	0% { height: 0;	}
	100% { height: 5em;	}
}
html { font-size: 100%; }
body { font-size:1.1em; }
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  margin: 0px; padding: 0px; border: 0px;
} /* very basic reset */

    summary, details {width:100%; overflow:hidden;}
    details details summary { padding-left:1em;} 
	details details summary, summary > span { background-color:#FFCF65; cursor:pointer;  }
	summary > span { width:auto; padding:0px .36em; display:block; float:right; }
	details {
		line-height:1.5em;
		overflow:hidden;
		background-color:lightgrey;
	    width:100%; overflow:hidden;
    }
	details > div { width:100%; height: auto; overflow:hidden; }
	details#mainmenu{ background-color:#DC3333;}
    
	details#mainmenu > summary { width:100%; }
	details#mainmenu > summary > span { text-align:right; width:1.65em; display:block; margin-left:auto; overflow:hidden; white-space:nowrap;}
	details#mainmenu > summary > span > span { display:inline-block; width:1em;  }
	details#mainmenu > summary::-webkit-details-marker { display:none; }
	details#mainmenu > summary::details-marker { display:none; }

nav details a, nav details div {
	margin: 0px;
	padding: 0px;
}
nav details > div > details div {padding:0 5% 0 5%}
nav details a {width:100%; background-color:darkgrey; display:inline-block; }
	nav details div > a:hover {
		background-color:#DDEAFF;
	}
	nav details div > a {
		min-width:12.5%;
	}
	/*always fill the space, up to 8 wide*/
	nav details div.Children1 > a { min-width: 100.00000000000000%;}
	nav details div.Children2 > a { min-width: 50.00000000000000%;}
	nav details div.Children3 > a { min-width: 33.33333333333333%;}
	nav details div.Children4 > a { min-width: 25.00000000000000%;}
	nav details div.Children5 > a { min-width: 20.00000000000000%;}
	nav details div.Children6 > a { min-width: 16.66666666666667%;}
	nav details div.Children7 > a { min-width: 14.28571428571429%;}
	nav details div.Children8 > a { min-width: 12.50000000000000%;}
#SiteContent { padding: .75em; }
nav {}
p {margin-bottom:.75em;}
@media all {
	details div { animation-timing-function:cubic-bezier(0,0,.7,0); }
	details#mainmenu[open] > div {
	    animation-name: slideDown3;
	    animation-duration: 250ms;
	}
	div.Children1 {
	    animation-name: slideDown1;
	    animation-duration: 250ms;
	}
	div.Children2 {
	    animation-name: slideDown2;
	    animation-duration: 225ms;
	}
	div.Children3 {
	    animation-name: slideDown3;
	    animation-duration: 200ms;
	}
	div.Children4 {
	    animation-name: slideDown4;
	    animation-duration: 175ms;
	}
	div.Children5 {
	    animation-name: slideDown5;
	    animation-duration: 150ms;
	}
	div.Children6 {
	    animation-name: slideDown6;
	    animation-duration: 150ms;
	}
	details[open] div.Children7 {
	    animation-name: slideDown7;
	    animation-duration: 150ms;
	}
	details[open] div.Children8 {
	    animation-name: slideDown8;
	    animation-duration: 150ms;
	}
	p {
		column-count:1;
	}
}
@media all and (min-width:480px){
	details div {
		animation-name:none;
		animation-duration:0ms;
	}
	nav > details { position:absolute; top:0px; }
	#SiteContent {
		margin-top: 1.1em;
		text-indent:1.5em;
	}
	nav details a {
		margin: 0 -.14em;
		border:1px solid blue;
		padding:.25em .75em;
		width:50%;
	}
}
@media all and (min-width:600px){
	nav details a {
		border-color:yellow;
		width:33.333333333%;
	}
	#SiteContent{
		column-count:2;
	}
}
@media all and (min-width:768px){
	nav details a {
		border-color:green;
		width:25%;
	}
}
@media all and (min-width:992px){
	#SiteContent{
		column-count:3;
	}
	nav details a {
		border-color:green;
		width:20%;
	}
}
@media all and (min-width:1382px){
	#SiteContent{
		column-count:4;
	}
	nav details a {
		border-color:green;
		width:12.5%;
	}
}
html {position:relative; border-top:40px solid black;}

dabblet.html

<nav>
<details id="mainmenu">
<summary><span>☰<span></span>Menu<span></summary>
	<div>
		<details open>
		<summary>Products</summary>
    	<div class="Children6">
     		<a href="#">Product1</a>
	     	<a href="#">Product2</a>		
	     	<a href="#">Product3</a>
	     	<a href="#">Product4</a>
	     	<a href="#">Product5</a>
	     	<a href="#">Product6</a>
    	</div>
	</details>
	<details open>
    	<summary>Recipes</summary>
    	<div class="Children2">
     		<a href="#">Recipe1</a>
     		<a href="#">Recipe2</a>
    	</div>
	</details>
</div>
</details>
</nav>
<div id="SiteContent"><p>Bacon ipsum dolor sit amet aute in reprehenderit shoulder corned beef, in biltong short ribs cillum consectetur voluptate. Aliquip drumstick ground round proident turducken ut consectetur venison. </p><p>Deserunt prosciutto excepteur strip steak. Short ribs bresaola consequat fatback capicola do. Jowl shoulder in aliquip andouille frankfurter biltong minim bresaola ball tip id ut enim drumstick. </p><p>Mollit anim consectetur velit aliquip, excepteur sunt dolore pariatur pig dolor labore ground round laboris eiusmod. Corned beef doner short ribs, ground round shank in et short loin laboris tail in voluptate ullamco.</p>
<p>Tri-tip turkey velit eu nulla occaecat leberkas sausage adipisicing filet mignon pastrami capicola. Biltong mollit cupidatat magna bresaola kielbasa beef ribs sint enim pork loin, esse shoulder id.</p><p>Adipisicing dolore laboris ham hock occaecat, velit tempor t-bone pork belly spare ribs fugiat short loin id est rump. Pork cow biltong, beef ribs beef pariatur pork chop jerky ut frankfurter pastrami. Pariatur voluptate salami, tail quis consequat dolore prosciutto boudin pork doner swine.</p>
</div>

dabblet.js

var detailEls = document.getElementsByTagName("detail");
var summaryEls = document.getElementsByTagName("summary");
function CancelSummary(e){
	if (getViewport().width < 480){
		return true;
	} else {
		return false;
	}
}
for (var el in summaryEls){

}
alert('test');
window.isLargeViewscreen = false;
window.isSmallViewscreen = false;
window.onresize = {
	if (getViewport().width < 480) {
	}
}
function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return {width:viewPortWidth, height:viewPortHeight};
}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}