Einbindung mobile_menu

Zitat:

---

Denke daran, dass dann jede Seite, welche Unterseiten hat, eine Weiterleitung auf die 1. Unterseite sein muss, also selbst keinen Inhalt hat, weil man diese Seite selbst dann nicht mehr aufrufen kann. (Näheres dazu gleich) Weiterleitungsziel braucht man dabei nicht einzustellen.

---

Ja, das wusste ich, das ist bei der Website schon seit Jahren so eingerichtet, sehr praktisch.

Zitat:

---

mobile_menu arbeitet damit, dass der 1. Klick das Untermenü öffnet und der 2. Klick auf den selben Link dann die Seite aufruft. Das finde ich eigentlich nicht so optimal.

---

Aber wenn es bei Klick eine Weiterleitung auf die 1. Unterseite gibt, kann man die Parent-Seite ja sowieso nicht zweimal aufrufen...? Also, ich finde mobile_menu sehr intuitiv.

Zitat:

---

Die verschwinden nicht sondern die neue Seite wird geladen und der erste Zustand ist halt der, dass die Untermenüs versteckt sind.

---

Ich formuliere vielleicht nicht so sauber, weil es so schön ist, wenn sie verschwinden wie gewünscht :-). Bei dem erwähnten JS ist im CSS .sub-menu {display:none;} ja der Ur-Zustand und das remove.Class ist der Zustand, den ich mir beim mobile_menu wünschen würde. Aber ich verstehe jetzt besser, dass mobile_menu halt normalerweiese mit einem Trigger arbeitet und die Kulturbanausen mit einem eigenständigen Menü.

Zitat:

---

Eine Templateänderung brauchst du da nicht, musst nur die Selektoren im Script ändern. .menu-item-has-children ist bei Contao z.B. .submenu und $('.site-nav > ul > li > .sub-menu') wäre $('#myNav .submenu > ul')

---

Letzteres hat nicht funktioniert, da sind auch die Elternelemente verschwunden. Wahrscheinlich, weil die Klasse .sub-menu auf die ul gelegt wird und nicht auf das li.

Vielleicht werde ich Kamil mal fragen, ob er sein Menü für Desktop ohne Trigger erweitern würde.

Zitat:

---

Man kann darin besser werden, wenn man zwischendurch mal Spielereien direkt in der Konsole des Browsers macht...

---

Für solch eine "Spielerei" müsste ich erstmal ein paar Monate intensiv büffeln ;-). Aber ein sehr interessantes Ergebnis.

Zur Info: Kamil schreibt, das mobile_menu sollte für eine Navi wie meine nicht genutzt werden (ich habe eine horizontale Hauptnavi und zwei Unterebenen, die jeweils auf Klick öffnen sollen). Er empfiehlt die superfish-Navi, aber ein Hover-Menü via CSS habe ich ja schon und wollte es bewusst barriereärmer machen.

Zitat:

---

Zitat von thymian

Aber wenn es bei Klick eine Weiterleitung auf die 1. Unterseite gibt, kann man die Parent-Seite ja sowieso nicht zweimal aufrufen...? Also, ich finde mobile_menu sehr intuitiv.

---

Also wenn ich mit dem ersten Klick ein Dropdown auslöse, dann erwarte ich nicht, dass beim zweiten Klick die Seite aufgerufen wird, sondern, dass sich das Dropdown wieder schließt. Oder? Das was letztendlich bei Klick passiert wird mit JS gesteuert. Mit

PHP-Code:

---

// JS jQuery

$('a').on('click', function(diesesEvent) {
  diesesEvent.preventDefault(); // verhindert die Aktion, die der Browser normalerweise ausführen würde
  // anstatt dessen do my stuff
  alert('hello world');
}); 


---

Damit braucht man keine Templateänderung bei der man aus dem Link von Seiten mit Untermenü ein SPAN o.ä. macht. Weil man für das barierearme Menü ja sowieso JS einsetzt ist dies der Weg.

Zitat:

---

Zitat von thymian

Wahrscheinlich, weil die Klasse .sub-menu auf die ul gelegt wird und nicht auf das li.

---

Es spricht die UL an, welche das Submenu ist. Das tue ich ja auch. Wahrscheinlich musst du das CSS noch anpassen.

Zitat:

---

Zitat von thymian

Vielleicht werde ich Kamil mal fragen

---

Ich denke, dass er viele wichtige Sachen zu tun hat, und die Erweiterung erfüllt ja soweit seinen Zweck.

Auf die Contao Demo umgeschrieben würde das CSS von Kulturbanause so aussehen.

PHP-Code:

---

/* CSS */

* {
   font-family: Arial, sans-serif;
   box-sizing: border-box;
}
html,
body {
   margin: 0;
   padding: 0;
}
header {
   max-width: 1200px;
   margin: 5em auto;
   transition: all .5s ease-in-out;
   text-align: center;
}
a:hover {
   opacity: .9;
}
#nav-main ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#nav-main > ul {
   display: flex;
}
#nav-main > ul > li {
   position: relative;
   margin: .2em;
   flex: 1;
}
#nav-main a,
#nav-main strong {
   display: block;
   padding: 1em;
   text-decoration: none;
   color: white;
   border-bottom: 1px solid rgba(255,255,255,.5);
   background: darkcyan;
}
#nav-main li.submenu ul {
   display: none;
}
#nav-main li.submenu ul a {
   background: #333;
} 


---

Und das JavaScript so.

PHP-Code:

---

// JS

$('#nav-main > ul > .submenu').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  $(this).toggleClass('sub-menu-open');
  var $el = $('ul',this);
  $('#nav-main > ul > li.submenu > ul').not($el).slideUp();
  $('#nav-main > ul > li.submenu > ul').not($el).parent().parent('li').removeClass('sub-menu-open');
  $el.stop(true, true).slideToggle(400);
}); 


---

Guck mal, hier hatte ich das mit mobile_menu und nur einer Navigation für mobile und desktop umgesetzt.
Hier für 2 Level
https://akademie-entwicklung.de
Und hier für mehr Level
https://kunsttour-neu-ulm.de

Zitat:

---

Also wenn ich mit dem ersten Klick ein Dropdown auslöse, dann erwarte ich nicht, dass beim zweiten Klick die Seite aufgerufen wird, sondern, dass sich das Dropdown wieder schließt. Oder?

---

Jetzt weiß ich, was Du meinst. Ja, Du hast Recht. Ich meinte nur, wenn ich im mobile-Zustand auf den Hamburger klicke und mir dann eine Seite auswählen kann, habe ich ja gar keinen Anlass mehr, nochmal auf den Hamburger zu klicken. Dasselbe mit der Desktop-Ansicht. Wenn ich schon eine Unterseite auswählen kann, brauche ich ja kein zweites Mal auf die Mutter-Seite zu klicken. Aber es stimmt, wenn man es tut, sollte sich eigentlich das Menü wieder schließen.

Zitat:

---

Es spricht die UL an, welche das Submenu ist. Das tue ich ja auch. Wahrscheinlich musst du das CSS noch anpassen.

---

Ja, es war ein CSS-Problem.

Vielen Dank für Deine ausführlichen Erläuterungen. Ich hatte beide Lösungen probiert, und beim kulturbanausen-JS war meine dritte Ebene entweder immer offen oder immer zu, aber die Navi schloss sich mit dem Laden einer neuen Seite. Beim mobile_menu, das mir lieber ist, da nur ein JS, funktionierte alles wie gewünscht, nur schloss sich die Navi nicht.

Mit der Verlinkung Deiner beiden Seiten, die ich übrigens sehr schön und klar finde, habe ich jetzt gesehen, was ich gesucht habe: nämlich ein paar ergänzende Zeilen JS-Code, die die Klassen .submenu_show und _hide entfernen bzw. hinzufügen. So was kann ich leider nicht selbst schreiben. Vielleicht wäre das mit CSS gegangen, wenn es einen parent-Selektor gäbe.

Wegen einer evtl. Nutzung Deiner JS-Zeilen schreibe ich Dich nochmal privat an.