JavaScript/Tutorials/zugängliche Dropdown-Navigation

[JürgenB]

Hallo,

ich vermute, du meinst dieses Tutorial:

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation

Das Beispiel https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Menue_mit_details.html sollte auch im IE funktionieren. Tut es das bei dir?

Im Quelltext dieser Datei findest du folgendes:

// Polyfill für IE und Edge
	var native_details = ('open' in document.createElement("details"));
	if (!native_details) {
/*		var script = document.createElement('script');
		script.src = "details-polyfill.js";
		document.getElementsByTagName('head')[0].appendChild(script);
*/
		// details-polyfill.js

...

	// Ende details-polyfill.js
	}

Alles zwischen // details-polyfill.js und // Ende details-polyfill.js muss in eine Datei mit Namen details-polyfill.js verschoben werden, und der Teil

/*		var script = document.createElement('script');
		script.src = "details-polyfill.js";
		document.getElementsByTagName('head')[0].appendChild(script);
*/

muss von den Kommentarzeichen befreit werden. Denn der lädt den Polyfill. Evtl. muss der Pfad angepasst werden.

Das Menüscript sieht dann so aus:

window.addEventListener("DOMContentLoaded",function() { 
"use strict"

	// Das Navigationselement
	var navele = document.querySelector("#sitenav");
	if(!navele) return;

	// Polyfill für IE und Edge
	var native_details = ('open' in document.createElement("details"));
	if (!native_details) {
		var script = document.createElement('script');
		script.src = "details-polyfill.js";
		document.getElementsByTagName('head')[0].appendChild(script);

	}

	// Alle details und summary
	var details = navele.querySelectorAll("details");
	var summary = navele.querySelectorAll("summary");


... hier weiter wie im Beispiel, bis einschließlich

});

und sollte in eine Datei menue.js ausgelagert werden. Ebenso sollte das css in eine Datei menue.css ausgelagert werden.

Gruß
Jürgen