Drop-Down-Navigation - jQuery Einbindung

Hi Leute,

Ich habe für eine Navigation per Click folgendes jQuery:

Code:

---

(function($) {
  $(document).ready(function() {
  $('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
});
  });
})(jQuery);

---

Das Beispiel dazu ist zu sehen unter der folgenden Domain, wenn man auf "GESTALTUNG" klickt

http://vorlage.ips21.de/

Jetzt mein Problem:

Wenn man z.B. auf Gestaltung klickt, dann fährt das Drop-Down-Menü aus.
Es lässt sich aber nur wieder schließen, wenn man auf einen dieser ausgefahrenen Links / Button klickt.

Wie lässt sich das Ganze so realisieren, daß bei Klick irgendwo auf der Seite das Drop-Down-Menü wieder zuklappt,
ohne dabei auf einen Link klicken zu müssen?

Wäre das hier eine passende Lösung?
Da ich mit mit JS / jQuery noch nicht so gut vertraut bin, würde ich gern wissen, wie muß ich das auf meinem obigen Code einbinden?

https://wiki.selfhtml.org/wiki/JavaS...dEventListener

Hey, schau dir vielleicht mal das hier an: https://craigmdennis.com/articles/cl...utside-jquery/

Wie genau muß ich das machen?

Was muss an dem Code hier

Code:

---

(function($) {
  $(document).ready(function() {
      $('nav.mod_navigation ul li.submenu > a').click(function() {
            $(this).parent().siblings().find('ul').slideUp(300);
            $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
        });
  });
})(jQuery);

---

abgeändert werden?

Oder muß eine neue Datei.js erstellt werden?

Bitte lies dir die Erklärung im Link genau durch, dort findest du alles, was du brauchst.

Weil du bereits deinen bisherigen Code erfolgreich eingebunden hast, nehme ich an, dass du ein bisschen Basiswissen über Javascript/jQuery hast. Zusammen mit dem Link kannst du dein Problem sicherlich gut lösen und es hilft dir auch zukünftig mit Javascript etc. umzugehen, weil das vollkommen losgelöst von Contao ist.

Ich komme irgendwie noch nicht weiter mit dem Schließen der geöffneten Drop-Down-Navigation bei KLICK irgendwo auf der Seite.

Zitat:

---

Hey, schau dir vielleicht mal das hier an: https://craigmdennis.com/articles/cl...utside-jquery/

---

Ich stehe da mangels technischen Wissens noch bissl auf dem Schlauch.
Wie muß ich den Code umändern?

Meine Testseite ist hier vorlage.ips21.de

So schaut der HTML-Code aus:

Anhang 20374


Der bisherige Code für JS / jQuery ist dieser hier:

Code:

---

(function($) {
  $(document).ready(function() {
    $('nav.mod_navigation ul li.submenu > a').click(function() {
        $(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
      });
  });
})(jQuery);

---

Wo muß ich da was wie einbinden?

Danke für das tolle Snippet. War genau das was ich gesucht habe. Das kannst du im Seitenlayout im Bereich "Eigener JavaScript-Code" einfügen, dann steht es überall zur Verfügung;

Code:

---

<script>
(function($) {
  $(document).ready(function() {
    $('nav.mod_navigation ul li.submenu > a').click(function() {
        $(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
      });
  });
})(jQuery);
</script>

---

Kleine Korrektur habe ich noch. Da sich das nav_default ja in Contao 4 geändert hat und beim aktiven Menüpunkt ein "strong" verwendet wird, hier noch mal das angepasste Javascript:

Code:

---

<script>
(function($) {
  $(document).ready(function() {
        $('nav.mod_navigation ul li.submenu > a, nav.mod_navigation ul li.submenu > strong').click(function() {
        $(this).parent().siblings().find('ul').slideUp(300);
                $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
      });
  });
})(jQuery);
</script>

---

Noch eine kleine Verbesserung um das Script auf die Hauptnavigation zu begrenzen gibt man dem Modul der Navigation die Klasse "mainnav" und verwendet dann folgendes JS:

Code:

---

<script>
(function($) {
  $(document).ready(function() {
        $('nav.mod_navigation.mainnav ul li.submenu > a, nav.mod_navigation.mainnav ul li.submenu > strong').click(function() {
        $(this).parent().siblings().find('ul').slideUp(300);
                $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
      });
  });
})(jQuery);
</script>

---

Hallo Schnippel und operatorone,

ich freue mich auch sehr über den Code, er funktioniert super und ich konnte mein Hover-Dropdown mit wenigen CSS-Änderungen in ein Klick-Dropdown ändern.

Aber: Es lässt sich nach wie vor nicht schließen. Der Hinweis von claus hat mir nicht geholfen, da ich ebenfalls keine JS-Leuchte bin.

Hat jemand noch einen Tip? Es müsste sich ja quasi das Menü schließen, sobald ein Link angeklickt wurde, der kein Submenu enthält.

Marion

Klasse danke dir für den Beitrag. Könntest du deinen Code vielleicht gleich posten, dann kann auch jemand anderes sein Problem damit lösen. Wäre klasse. ;)

:D Den Code (also das CSS) werde ich ganz bestimmt nicht posten, denn er ist alles andere als Best Practice. Er ist von ca. 2015, da hatte ich gerade erst angefangen. Aber er funktioniert, und deshalb habe ich ihn kaum verändert.

Im Prinzip habe ich nur die Hover, die ein Untermenü öffnen, auskommentiert. Dann im Hauptmenü das Stoplevel auf 1 gesetzt. Über die Dev Tools kann man dann noch restliches CSS anpassen, wenn nötig.

Hast Du es denn geschafft, das Menü wieder zu schließen?

Edit: Asche auf mein Haupt, das JS wird gar nicht genommen. Die Click-Navi funktioniert auch ohne JS, aber klappt eben nicht wieder zu.

Ich bin jetzt ein Stück weiter. Mit dem Schnipsel von Schnippel hat es letztlich nicht geklappt. Aber bei kulturbanause.de habe ich ein Script gefunden, das sehr gut funktioniert.

Dafür muss man noch im Template nav_default das "sub-menu" nach dieser Anleitung einbauen: https://community.contao.org/de/show...inzuf%C3%BCgen

Hat jemand eine Idee, wie man das nun auf eine Navigation für zwei Ebenen erweitern könnte?