Bei einzelnen Menüpunkt, die Untermenüeinträge immer anzeigen, alle anderen Menüpunkte sind normal geschlossen


    Module/Menü

    In ein Menü möchte ich im einzelnen Menüpunkt die Untermenüeinträge immer aufgeklappt haben, alle anderen Menüpunkte normal geschlossen, außer sie werden angeklickt.


    Unter Navigation - Menü würde weiterhin der Bereich Untermenüeinträge anzeigen, deaktiviert sein.


    Gibt es dazu eine Lösung, ich habe bisher nichts gefunden, oder alternativ eine Erweiterung, bei der ich so was einzeln einstellen kann.


    Ich habe zwar auch irgendwo gelesen, man kann ein Menü splitten, würde aber nur ungern so zu einer Lösung kommen.

    Irgendwer eine Idee, Tipp?

    Entweder oder. Das Mischen beider Varianten geht mit Coremittel nicht.

    Lösbar wäre das mit einer Megamenue-Erweiterung oder Modulesanywhere. Die "aufgeklappten" Untermenüpunte würde ich also als Zusatzmodul (custom-modul) einbauen. Die Verlinkung wäre aber statisch.

    Code
    Hi,man könnte dies auch per CSS/JS lösen. Du stellst alle Menüpunkte auf sichtbar und dann weist Du den Menüpunkten welche per Klick geöffnet werden sollen eine eigene Klasse zu. 
Zusätzlich erstellst Du auch noch eine Klasse welche die Menüpunkte ausblendet. 
Per JS fragst Du dann den Klick-Event ab und änderst die Klasse.


    Code
    $(document).on('click', '.menu-item-hidden', function(){
    if($(this).hasClass('menu-hidden'){
        $(this).removeClass('menu-hidden');
    }
    else {
        $(this).addClass('menu-hidden');
    }
});

    Ich denke, das geht auch mit einfachem CSS und eigener Menüeintragsklasse. Das hängt dann davon ab, wie die Untermenüeinträge auf versteckt gesetzt werden. Wenn's nur ein einfaches display: none ist, setzt man für die Menüeintragsklasse-Untermenüs eben ein höher "rulendes" display:block. Ohne Link zum Problem kann man das aber nicht wissen.

    Müsste eigentlich gehen, wenn man zwei Menüs einbindet. Das eine, welches immer aufgeklappt ist und das andere, welches geschlossen ist. Wenn du dann die beiden Moduloe unterinander/nebeneinader geschickt mit CSS einbindest, sieht niemand, das es eigentlich zwei Menüs sind.



    Axel

    Hi zusammen, erst einmal Danke an alle:


    Um das mal etwas nachvollziehbarer zu machen habe ich zum Test mal was erstellt. Danke übrigens DirtyWorld für den Link zu 'jsbin.co' , ist eine tolle Seite um mal was auszuprobieren.


    Hier die Testseite, im Menü zur linken Seite, ist der Menüpunkt 'Seite 8' offen, so das die zweite Ebene (Seite 8a bis 8d) beim Start der Seite immer offen ist.


    » Testseite


    • Indigo66 – "Mischen beider Varianten geht mit Coremittel nicht", dann eher Erweiterungen wie Megamenue oder Modulesanywhere und die "aufgeklappten" Untermenüpunte als Zusatzmodul (custom-modul)
    • DirtyWorld – eine Lösung über CSS/JS
    • Re:Later – nur mit CSS und eigener Menüeintragsklasse
    • time4mambo – Lösung mit zwei Menüs ...


    Zu Indigo66, "Mischen beider Varianten geht mit Coremittel nicht"?


    Ja, dachte ich mir schon, habe bei den Megamenue-Erweiterung mal nachgesehen, da gibt es ja einige Erweiterungen, z.B. JUX Mega Menu, oder DJ-MegaMenu. Was mir bei etwas stört: Ich zahle auch gerne für eine für meine Anforderungen gut funktionierende Erweiterung, wenn ich sie vorher in Ruhe testen kann. Bei einigen (wenn ich das richtig gesehen habe) muss man aber vorher erst zahlen... muss da noch etwas suchen, oder bei den Entwicklern nachfragen.


    Die zweite Idee (Zusatzmodul [custom-modul)] hört sich fast danach an, ein Menü zu splitten? Ist mir nicht so ganz klar, wie es sonst gehen könnte, als zwei Menüs zu kombinieren.


    Zu DirtyWorld, hört sich interessant an, so ganz steige ich da noch nicht durch wie das gehen soll, muss da vielleicht noch etwas rumprobieren, eine Kombination mit CSS/JS ist vielleicht auch etwas problematisch, weil ich gerne auch für Leute die kein Javascript verwenden, eine alternative Lösung anbiete... obwohl, dafür fällt mir gerade auch eine Lösung ein,
    die alternativ eine Javascript freie Lösung anbieten könnte.


    Zu Re:Later, nur mit CSS würde mir gefallen, nur wie setze ich das um? Im Menu selbst kann ich doch nur im Menupunkt eine CSS-Klasse für den Link vergeben. Im Menu-Override
    kann ich zwar eine Änderung vornehmen, aber die wirkt sich dann für alle Menü Punkte aus (global). Ich möchte ja, dass nur ein Menüpunkt offen bleibt und die anderen sind normal
    geschlossen. Siehe Testseite


    Zu @time4mambo, ja das geht wohl, du meinst so was wie "Splitmenü mit Joomla" , habe ich versucht auf meiner Testseite zu visualisieren (rechte Menüseite), schöner ist das Natürlich, wie das auf der Testseite im Menü (linke Seite) dargestellt ist, weil dann visuell alles logisch zusammen bleibt und nicht noch zusätzlich ein Modulplatz eingeplant werden muss. Ist natürlich auch abhängig von dem Template.


    Zusammenfassend:

    Erscheint mir alles etwas kompliziert..., vielleicht insgesamt vom Aufwand etwas übertrieben, wenn ich da nicht noch eine gute Erweiterung finde (die ich zuerst mal testen kann) geht wohl nur diese Lösung unkompliziert umzusetzen oder ich mache es über ein Splitmenue..., bin gerade etwas ratlos.


    Ich danke euch jedenfalls, da waren ein paar spannende Ideen dabei.

    *redLine


    Wenn ich ein Splitmenü gemeint hätte, hätte ich das auch so geschreiben und dir sogar noch ein Tutorial dazu mitverlinkt.

    Ich meine zwei Menüs für zwei Menümodule! Im Modul kannst du jeweils einstellen, ob die Untermenüpunkte angezeigt werden sollen oder nicht.



    Axel

    Zitat von *redLine

    Ich möchte ja, dass nur ein Menüpunkt offen bleibt und die anderen sind normal

    Nehmen wir mal "Seite 2". Das Submenü wird nicht angezeigt, weil

    Code
    nav .submenu {
    visibility: hidden;
    height: 0;
... und weiteres ...
}

    Jetzt gibst du dem Menüeintrag für Menüeintrag "Seite 2" eine "CSS-Klasse für Link" namens "immerOffen".


    In einem Override der default.php von mod_menu trägst z.B. hier ein:

    https://github.com/joomla/joom…menu/tmpl/default.php#L68


    Code
    // Wurde Linkklasse immerOffen eingegeben?
if (strpos($item->anchor_css, 'immerOffen') !== false)
{
    // Also bekommt das LI diese Klasse zugewiesen.
    $class .= ' immerOffen';
    
    // Pedanterie, damit der A-Tag die Klasse nicht zusätzlich bekommt.
    $item->anchor_css = str_replace('immerOffen', '', $item->anchor_css);
}


    Jetzt hast als Ergebnis so was in der Art (siehe LI-Klasse immerOffen)

    Code
    <li class="item-1060 immerOffen">
    <a href="/datenschutz">Seite 2 anklicken</a>
    <ul class="submenu">
        <li><a href="#">Seite 2a</a></li>
        <li><a href="#">Seite 2b</a></li>
      </ul>
</li>

    Nach meiner Denke fehlt dann nur noch ein CSS, das hinter den Anweisungen stehen sollte, die ich in deinem Seitenquelltext sehe:

    Code
    nav li.immerOffen .submenu {
    visibility: visible;
    height: auto;
... und weiteres ...
}

    "... und weiteres ..." hier natürlich nur Platzhalter für weitere CSS-Angaben.


    Vielleicht musst noch "!important" setzen oder ähnlich verschärfen. Siehst ja dann selber.


    EDIT: Natürlich kann man Klasse "immerOffen" auch mit zusätzlichem JS von A nach LI verschieben, aber, wenn ein Menü schon nur auf CSS aufbaut, würde ich persönlich das nicht machen wollen, außer es ist irgendwie wegen Umgebung notwendig.

    Ok ist dann wohl doch etwas schwieriger.


    Wenn ich z.B. um Seite 2 Menüpunk offen zu behalten beim Menüpunkt Seite 2a und Seite 2b die Klasse "immerOffen" eintrage wird
    die Klasse an die Listenpunkte vergeben, soweit so gut.

    Ein paar offene Fragen:

    1. Wenn ein Menüpunkt noch nicht angeklickt wurde, dann wird doch die zweite Ebene von Joomla noch gar-nicht geladen, erst wenn ich diesen Menüpunkt ausgewählt habe,
      sind die Unterebenen geladen, oder sehe ich das falsch (siehe Code Snippet unten)
    2. Muss dazu im Menü Modul 'Untermenüeinträge anzeigen' angeschaltet sein?
    3. Wenn 2., wie sorge ich dafür, dass außer 'Seite 2' alles geschlossen ist. Ja ich kann zusätzlich
      vielleicht ein JS/ jQuerry schreiben, welches z.B. wenn nicht aktiv eine Klasse für alle Menüpunkte außer 'Seite 2'
      im Listen Punkt schreibt und sobald angeklickt diese Klasse wieder löscht...

    Hmm, ist das irgendwie nachvollziehbar... brauche wohl dazu etwas Abstand, mache mir morgen dazu noch mal Gedanken.


    Vorerst danke, für die Hilfe :)



    Ich war davon ausgegangen, dass immer offen nur in Seite 2 eingetragen wird. Dann wird untergeordnetes ul.submenu aufgeklappt, in dem sich ja 2a und 2b befindet.

    Zitat von *redLine

    Muss dazu im Menü Modul 'Untermenüeinträge anzeigen' angeschaltet sein?

    Ja, da sonst die Untermenüeinträge, die du per CSS einblenden willst, gar nicht per PHP geladen werden.


    Zitat von *redLine

    Wenn 2., wie sorge ich dafür, dass außer 'Seite 2' alles geschlossen ist. Ja ich kann zusätzlich
    vielleicht ein JS/ jQuerry schreiben, welches z.B. wenn nicht aktiv eine Klasse für alle Menüpunkte außer 'Seite 2'
    im Listen Punkt schreibt und sobald angeklickt diese Klasse wieder löscht...

    Versteh ich jetzt nicht. Auf deiner Demoseite hast du sie doch per CSS ausgeblendet (visible:hidden;), obwohl sie da sind. Siehe Post #9 erster Code.

    Hi Re:Later,

    oh sorry, dann habe ich wohl für ein Missverständnis gesorgt, auf der Testseite sollte das linke Menü nur einen visuellen Eindruck geben.


    Das Joomla Menü ist etwas komplexer (teilweise mehr als zwei Menüebenen), der erste Menüpunkt ist die Startseite. Ich habe jetzt bewusst nicht im Menü Modul die 'Untermenüeinträge anzeigen' angeschaltet, weil der Quellcode ansonsten zu komplex wäre.


    Auf der Testseite ist der offene Menüpunkt 'Seite 7' mit den Unterseiten (Seite 7a, 7b ...) so wie ich es mir wünschen würde.


    Ich habe die visuelle Seite überarbeitet, in etwa so, wie er bei bei Joomla, nur die Klasse 'offen' habe ich schon mit verwendet. Hoffe das ist jetzt nachvollziehbarer.



           » Testseite



    So in etwa:

    Vergesst mein letztes Post #13, hat sich erledigt


    Irgendwie habe ich da einen Denkfehler, im Testmenü hatte ich versucht das Joomla Menü grob nach zubauen, wirklich funktionieren tut es aber nicht.


    Habe wohl Re:Laters Idee noch nicht richtig begriffen oder es geht so nicht.

    Im Testmenü hatte ich das schließen über eine Klasse 'nav-child' in der entsprechenden <ul><ul> geregelt, da wo keine Klasse ist, bleibt wird die <ul><ul> sichtbar. Re:Later meinte hierfür aber eine zusätzliche Klasse zu vergeben. Dafür war ja sein Script in der 'Override'.


    Mein Testmenue, war auch eher dafür gedacht, sich vorstellen zu können, wie das Menü aussehen könnte.


    Klickt man z.B. bei Seite 2 an werden die Unterebenen sichtbar, gehen aber sofort wieder zu. Was natürlich auch klar ist, weil die Klasse ja immer noch da ist, man müsste möglicherweise über ein jQuery die Klassen austauschen oder mit einer anderen CSS Klasse das Verhalten überschreiben.

    In der Joomla Seite ist das etwas drastischer, dort werden die Untermenüs zwar über CSS weg geblendet, beim anschließenden anklicken gehen die noch nicht einmal mehr auf.


    Ich habe mir jetzt eine Joomla Testseite eingerichtet, da werde ich heute Abend mal etwas rumprobieren. Wenn ich eine Lösung raus bekomme, kann ich das, für die es interessiert, hier mitteilen.

    Der Ansatz von Re:Later wird bestimmt funktionieren, möglicherweise mit einer jQuery, in der die Klassen ausgetauscht werden, auch beim anklicken des Menüpunktes...