Demo Navigation

[beatovich]

hallo

Hier das JS, vielleicht entdeckt jemand, was den Safari stören könnte

function inittest1(){

function closeDetail(ev){
	ev.target.parentElement.firstChild.click();
	ev.target.parentElement.firstChild.focus();
}
var test1=document.getElementById("test1");
//	 Hamburger:  linear-gradient(to bottom, #444 0%, #444 20%, #fff0 20%, #fff0 40%, #444 40%, #444 60%, #fff0 60%, #fff0 80%, #444 80%, #444 100%)
var l = document.querySelectorAll("#test1 nav > *");
	l = l.length;
document.getElementById("test1_css").innerText += "\
	#test1 nav details > button:last-child { position:absolute; left:-200em; }\
	#test1 nav > :first-child{display:none}\
	@media screen and (max-width:"+ l * 7 +"em){\
		#test1 .hamburger { background: #fff6; border:0; font-weight:bold; text-transform:uppercase; width:100%;}\
		#test1 .hamburger:before { speak:none; content:url('favicon.ico'); \
			border-radius:4mm; font-size:8mm; line-height:8mm; vertical-align:-0.3em; margin-right:0.2em; }\
		#test1 nav:not(:focus-within) > :not(:first-child){ flex: 0 1 0; padding:0; overflow:hidden;  }\
		#test1 nav:not(:focus-within) > :first-child{display:block}\
	}\
";
var nav = document.querySelector("#test1 nav");
var b1 = document.createElement("button");
	b1.innerHTML="Menu";
	b1.className="hamburger";
	b1.addEventListener("focus", function(ev){ ev.target.nextElementSibling.focus(); } );
	nav.insertBefore(b1,nav.firstChild);
if(document.contains){
	document.body.addEventListener("click", function(ev){
		if( nav.querySelector("details[open]") && ! nav.contains(ev.target)){ 
			var col = nav.querySelectorAll("details[open]")
			for(var i=0; i< col.length; i++){
				col[i].open = false;
			}
		};
	});
}
var col = document.querySelectorAll("#test1 nav a");
for(var i=0; i< col.length; i++){
	if( col[i].href == document.location || col[i].href == "" ){
		col[i].setAttribute("aria-current", "page");
	}
}
col = test1.querySelectorAll("nav details");
for(var i=0; i< col.length; i++){
	var button = document.createElement("button");
	button.innerText="Close";
	button.addEventListener("focus",closeDetail);
	col[i].appendChild(button);
}

}
//document.addEventListener('DOMContentLoaded', inittest1, false);