Anbei noch der relevante Code
Code:
Relevantes HTML:
Der Toggle als Burger
<a href="#offcanvas" id="at-navbar" class="uk-hidden-large uk-navbar-toggle uk-float-right" data-uk-offcanvas></a>
Der Toggle als X
<a href="#offcanvas" id="at-navbar" class="uk-hidden-large uk-navbar-toggle uk-float-right is-active" data-uk-offcanvas></a>
Das Menü geschlossen
<div id="offcanvas" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<div class="module deepest">
Menüpunkte
</div>
</div>
</div>
Das Menü offen
<div id="offcanvas" class="uk-offcanvas uk-active">
<div class="uk-offcanvas-bar uk-offcanvas-bar-show">
<div class="module deepest">
Menüpunkte
</div>
</div>
</div>
Javascript, das ich verfasst habe zum Tranformieren zu einem X
(function() {
"use strict";
var toggles = document.querySelectorAll(".uk-navbar-toggle");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
Das Javascript, das nicht funktioniert hatte, lasse ich jetzt einfach mal raus. Das hier funktioniert wunderbar