PHP Forum

PHP Forum (http://www.selfphp.de/forum/index.php)
-   HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)
-   -   Klasse entfernen bei Klick auf Toggle (http://www.selfphp.de/forum/showthread.php?t=25883)

lulu68163 16.06.2016 14:40:26

Klasse entfernen bei Klick auf Toggle
 
Hallo,

ich habe ein Problem mit der mobilen Navigation auf folgendem Joomla CMS www.palotravel.de

Ich habe einen Burger mittels CSS erstellt, der beim Öffnen des Menüs zu einem X wird. Leider bekomme ich es nicht hin, dass bei Klick auf das X die Navigation schließt. Ich habe bereits einige Wege ausprobiert, aber irgendwie will keiner tun, was er soll...

Anmerkung: Später soll bei Klick auf die Menüpunkte "Reiseziele" und "Rundreisen" eine "tiefere Ebene" angezeigt werden und das X zu einem Pfeil werden. Bei Klick auf den Pfeil kommt man wieder auf die obere Ebene des Menüs und der Pfeil wird wieder zum X.

Ich hoffe ihr könnt mir helfen. Ich danke im voraus!

lulu68163 16.06.2016 15:46:21

AW: Klasse entfernen bei Klick auf Toggle
 
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



Alle Zeitangaben in WEZ +2. Es ist jetzt 10:00:21 Uhr.

Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.