Untermenüs eingeklappt

Quote from WollZi

Floka

Schaue ich mir demnächst mal an.

Super! vielemn lieben Dank.

Ich habe es schon selbst versucht aber das war keine gute Idee

Grüßle Flo

Quote from Floka

Bei deinem Code muss man den Menüpunkt anwählen bzw. anklicken um dann mit dem + das untermenü sehen zu können. Wäre es möglich das + auszuwählen auch ohne den Menüpunt bzw. die Seite dazu aufgerufen zu haben?

Nur zum genauen Verständnis: Möchtest du, dass per "touch" auf die kleinen Pfeile neben den Hauptmenüpunkten die Untermenüs angezeigt werden?

Hallöchen,

aktuell wenn ich die seite POIs nicht geöffnet habe sieht es so aus:

Es wäre aber ganz praktisch wen da nicht nur das Minus wäre sondern schon das Untermenü.

Um das Unter menü sehen zu können, muss ich dann die Seite POIs geöffnet haben.

Gruß Flo

Darauf hat aber der Code und allgemein Javascript keinen Einfluss. Offensichtlich werden unter deinem Menüpunkt "POIs" die Untermenüpunkte erst dann angezeigt, wenn die übergeordnete Seite angezeigt wird.

Nachtrag:

Wenn du im DOM die Untermenüpunkte nicht siehst, hast du per JS auch keinen Zugriff darauf.

Das ist nicht nur bei den POIs so sondern grundsetzlich.

Dein Eintrag "POIs" verweist auf ein geöffnetes Untermenü (zu erkennen am Minuszeichen). Allerdings werden, wie auf dem Bild zu erkennen, keine Untermenüpunkte angezeigt (anders als beim Untermenüpunkt "Umfragen" wahrscheinlich). Das Skript funktioniert natürlich nur dann, wenn auch ohne das Skript und ohne das CSS alle Untermenüpunkte im Hauptmenü angezeigt werden. Falls nicht, wird es so auch nicht funktionieren.

Quote from WollZi

Dein Eintrag "POIs" verweist auf ein geöffnetes Untermenü (zu erkennen am Minuszeichen). Allerdings werden, wie auf dem Bild zu erkennen, keine Untermenüpunkte angezeigt (anders als beim Untermenüpunkt "Umfragen" wahrscheinlich). Das Skript funktioniert natürlich nur dann, wenn auch ohne das Skript und ohne das CSS alle Untermenüpunkte im Hauptmenü angezeigt werden. Falls nicht, wird es so auch nicht funktionieren.

Das untermenü von den Umfragen ist garnicht zu sehen, da es ja geschloßen ist.

Wenn ich das Script entferne werden alle Untermenüs wieder angezeigt.

Gruß Flo

Vielleicht wäre an dieser Stelle ein Link zur betroffenen Seite ganz hilfreich (ggf. auch per PN).

Quote from WollZi

Vielleicht wäre an dieser Stelle ein Link zur betroffenen Seite ganz hilfreich (ggf. auch per PN).

Kurze frage: in deimen css code ist doch hinterlegt dass das Submenü aktiv sein muss oder? also müsste ich doch auch es ändern können irgendwie, das der Hauptmenüpunkt nicht aktiv sein muss.

Oder irre ich mich da?

Gruß Flo

Hallöchen WollZi,

ich habe meinen Fehler gefunden.

Es funktioniert nun alles so wie es soll.

Danke noch mal.

Alles klar .

Quote from WollZi

Den Javascript-Code im ACP unter Konfiguration > Allgemein > Seite und dort im Feld "Footer-Code" einfügen. Eleganter wäre es natürlich per TemplateListener. Zum Testen sollte es aber erst einmal so genügen.

Den CSS-Code dem entsprechenden Stil hinzufügen (Anpassung > Stile und dort unter Erweiterte Einstellungen). Dann sollte es funktionieren.

Andydeluxe97 ....!?

Irgendwie lässt sich das nicht einklappen bei dem ganzen. -.-

Hi,

ich möchte mich ebenfalls hier noch gerne für die von WollZi gepostete Lösung herzlich bedanken.

Kürzlich hatte ich eine ganz ähnliche Frage gestellt und wurde zunächst an sein Posting verwiesen.

Ich hatte auch schon einmal in einem eigenen Thema etwas vergleichbares gefragt, nur funktioniert die Lösung für mich offenbar nicht, da es eine Seitennavigation ist (im doppelten Sinn). Meine Navigation für eigene, erstellte Seiten befindet sich links an der Seite und da haben anscheinend andere Sachen als für den Code in der Top-Navi eine Bedeutung. Jedenfalls bekomme ich das nicht hin und hatte in meinem Beitrag ( CMS » Unterpunkte in Menüs einblenden/ausblenden ) auch bereits diesen Screen angehängt.

https://www.woltlab.com/attachment/156114-dw-komp-nav-png/

Vielleicht hat hier jemand mehr Erfahrung mit CSS als ich und kann mir einen Tipp geben, wo ich was zu ändern habe, dass es vielleicht doch noch mit dem Ein- und Ausklappen von Unterpunkten klappt.

Danke schon mal.

Quote from yzdev

Bei 5.2 greift der adjacent sibling combinator in .toggleContainer + ol.close nicht mehr, weil ein button nach .toggleContainer eingefügt wurde. Mit ~ statt + passt’s wieder.

Danke WollZi für den Code oben

Ich verstehe gerade nur Bahnhof

Bei mir sind die die Untermenupunkte jetzt auch alle ausgeklappt. Was müsste ich im Code ändern, das es wieder funktioniert. Ich habe es aktuell noch so.

Quote from WollZi

Den Javascript-Code im ACP unter Konfiguration > Allgemein > Seite und dort im Feld "Footer-Code" einfügen. Eleganter wäre es natürlich per TemplateListener. Zum Testen sollte es aber erst einmal so genügen.

JavaScript

<script  data-relocate="true">
    var $subMenu = $('.mainMenu .boxMenuDepth1 .boxMenuHasChildren');
    $subMenu.each(function() {
        var $container = $('<div class="toggleContainer" />');
        var $button = $('<a class="toggleSubMenu"><span class="icon icon16 fa-plus" /></a>');
        var $link = $(this).children('.boxMenuLink');
        $container.insertBefore($(this).children('.boxMenuLink'));
        $link.appendTo($container);
        $container.siblings('ol').addClass('close');
        $button.appendTo($container).click(function(e) {
            $(this).children('.icon').toggleClass('fa-plus fa-minus');
            $(this).parent('.toggleContainer').siblings('ol').toggleClass('close');
        });
    });
</script>

Display More

Den CSS-Code dem entsprechenden Stil hinzufügen (Anpassung > Stile und dort unter Erweiterte Einstellungen). Dann sollte es funktionieren.

CSS

.toggleContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .boxMenuLink, > .toggleSubMenu {
        padding: 7px 20px;
        white-space: nowrap;
        color: $wcfHeaderMenuDropdownLink;
        &:hover, &:focus {
            background-color: $wcfHeaderMenuDropdownBackgroundActive;
        }
    }
    > .boxMenuLink {
        flex: 1 1 auto;
        &:hover + .toggleSubMenu {
            background-color: darken($wcfHeaderMenuDropdownBackgroundActive, 10%);
        }
    }
    > .toggleSubMenu {
        flex: 0 1 50px;
    }
    + ol.close {
        height: 0;
        visibility: hidden;
    }
}

Display More

Quote from medimax

Ich verstehe gerade nur Bahnhof

Bei mir sind die die Untermenupunkte jetzt auch alle ausgeklappt. Was müsste ich im Code ändern, das es wieder funktioniert. Ich habe es aktuell noch so.

hat sich erledigt, hab es jetzt doch kapiert. Oh stand ich wohl ziemlich auf dem Schlauch

.toggleContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .boxMenuLink, > .toggleSubMenu {
        padding: 7px 20px;
        white-space: nowrap;
        color: $wcfHeaderMenuDropdownLink;
        &:hover, &:focus {
            background-color: $wcfHeaderMenuDropdownBackgroundActive;
        }
    }
    > .boxMenuLink {
        flex: 1 1 auto;
        &:hover + .toggleSubMenu {
            background-color: darken($wcfHeaderMenuDropdownBackgroundActive, 10%);
        }
    }
    > .toggleSubMenu {
        flex: 0 1 50px;
    }
    ~ ol.close {
        height: 0;
        visibility: hidden;
    }
}

Gibt es denn jetzt auch eine Lösung für ein Menü auf der Seitenleiste?

Wenn alle Menüpunkte inklusive Untermenüpunkte angezeigt werden, dann ist das eine ganz schön lange Liste.

Es wäre schon besser, wenn die Untermenüpunkte erst angezeigt werden, wenn man auf den übergeordneten Menüpunkt geklickt hat.

Von mir gibt es bald eine Lösung.

Demo: https://cwalz.de/

Aufgrund der geringen Resonanz gehe ich davon aus, dass andere sich für dieses Thema wohl nicht interessieren und es aktuell keine Lösung dafür gibt?