Hallo Homtata,
das Ganze ist viel komplizierter geworden als befürchtet.
Das Original-Menü wird komplett mit Javascript gesteuert und befüllt. Das HTML-Gerippe sieht anders aus als nach dem Javascript Eingriff.
Das Submenü ist inzwischen in einem Extramodul mit Smarty gelöst worden, über zwei Templates.
Hier der wichtige Teil von get1.tpl:
Code: Alles auswählen
{if !empty($wrapper.subcats)}
<li id="li{$idcat}" class="main-panel {$aClass|escape}" style="display: none;">
{$ulidcat=$idcat}
{include file="navigation_sub/template/get2.tpl"
tree=$wrapper.subcats path=$path ulClass="dropdown"}
{assign var="headingclass" value='main-sub'}
</li>
{/if}
Im Standardtemplate wird zuerst <li> angezeigt und darin dann nach Subkategorien gesucht.
Jetzt mache ich es umgekehrt und schreibe, erst wenn Unterkategorien vorhanden sind, soll es weiter gehen und <li> angezeigt werden.
Display:none ist darum, dass man mit Javascript dann den style auf display:block schalten kann, beim Event (click).
Template 2 wäre dann wie das normale Template auch mit ul-li Funktionalität.
Soweit funktioniert das auch.
Problem war jetzt, dass es sowohl <button> als auch <a> im Menü gibt, je nachdem ob ein Submenü vorhanden ist.
Das träfe auch auf das Hauptmenü im ersten Level zu.
Das ließe sich sicher auch mit Smarty machen, aber halt auch erst, wenn das Monster-Array $tree ausgelesen wurde. Davor weiß Smarty nichts von Submenüs.
Hab mit dem Kunden vereinbart, dass im Level 1 alles <button> ist und dafür eine Unterkategorie mit "Übersicht" sich auftut.
Das ist nicht semantisch aber im Original haben sie es nunmal so gelöst und es soll ja sein wie im Original.
Aktuell macht mir das Javascript noch zu schaffen, weil das Contenido Modul so aufgebaut ist, dass zuerst ein Anker <a> angeklickt und das Menü neu geladen werden muss, damit es mit "active" gekennzeichnet werden kann.
Im Original ist es aber so, dass ein Click auf einen Hauptmenü-Button ein Javascript Event auslöst, das eine Reihe an Dingen tut.
Die Menülogik ist mein Problem hier: Es wird nicht einfach aktiv geschaltet, weil aktiv ist es ja nicht, sondern es wird das <li> wie oben im Submenü-Code als display:block gesetzt und daneben noch eine Reihe mehr.
Im Hauptmenü setzt es neue Klassen dazu, sogar Attribute werden ins HTML gesetzt, so Dinge wie dass jetzt was sichtbar wäre oder im Pfad, und dann der Hintergund abgedunkelt, die Schriftfarben verändert, auch die von den anderen Menüpunkten, zudem erscheint ein Pfeil, der auf den "aktiven" Hauptmenüpunkt zeigt, während darunter das Submenü ausgeklappt ist.
Theoretisch soll sich das Submenü zuerst unter dem Hauptmenü ausklappen, und zwar immer linksbündig, daher der Pfeil unter dem Menüpunkt.
Danach sollen sich die tieferen Submenülevel nach rechts fortpflanzen.
Ich tue mich noch schwer, das mit Javascript alles gleichzeitig zu steuern, besonders auch die unterschiedlichen Click-Varianten mit der Ansteuerung der anderen HTML-Elemente. Beim Original kann ich nicht abkupfern, das dortige Javascript ist komprimiert und mehr als 8000 Zeilen lang.
Das Menüscript stammt wohl von Vue.js wie auch eigentlich das ganze Frontend.
Mit Vue.js kann ich hier bei Contenido nichts anfangen und sicher ist es ein angepasstes Menü und nichts von der Stange.
Ich habe es teils mit Javascript ohne Frameworks hinbekommen aber manchmal fehlt oder hakelt es noch.
Ich fürchte, da reichen Funktionen nicht mehr hin, vielleicht brauche ich Javascript Klassen