JavaScript/Tutorials/zugängliche Dropdown-Navigation
bearbeitet von Matthias ScharwiesHallo,
ich vermute, du meinst dieses Tutorial:
<https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_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:
~~~ JavaScript
// 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
~~~ JavaScript
/* 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:
~~~ JavaScript
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 Date menue.css ausgelagert werden.
Gruß
Jürgen