Neu Burger-Menu per Link oder Script öffnen?

[krahni]

Moin,
hat jemand 'ne Idee wie ich das Burger-Menu in einer bestimmten Ebene per Link oder Script öffnen kann?
Soll wenn isMobile bei Klick auf Kategorie-Link ausklappen ...

 

[css-umsetzung]

Theoretisch so, aber da ich dein Layout und nicht weiß was du da wirklich machen möchtest muss das mit Sicherheit angepasst werden, das Prinzip passt aber

$(document).on("click",".is-mobile .dein_selektor", function(e) {
    if($("#burger-menu[aria-expanded='false']").length>0) {
        e.preventDefault();
        $("#burger-menu[aria-expanded='false']").trigger("click");
        return false;
    }
});

 

[krahni]

Theoretisch ... der Kunde möchte das auch noch von einem OPC-Button ausgelöst haben ... das wird aufwändig ...
Aber Danke erstmal

 

[css-umsetzung]

Noe, vom Prinzip her dann so wie ich es gezeigt habe, die klasse is-mobile wird von JTL in den body gesetzt wenn jemand mobile kommt, also musst du ja nur noch deinen Selektor einsetzen.

 

[krahni]

Moin, ich krieg's irgendwie nicht gebacken

im head:

<script type="text/javascript">
$(document).on("click",".is-mobile .col.col-md-6.col-lg-3.col-xl-3.col-12",
    function(e)
    {
        if($("#burger-menu[aria-expanded='false']").length>0)
        {
            e.preventDefault();
            $("#burger-menu[aria-expanded='false']").trigger("click");
            return false;
        }
    }
);
</script>



Button mit OPC generiert - der soll das Burger-Menü ausklappen, in 2. Ebene:

<div class="row  opc-hidden-sm opc-hidden-md opc-hidden-lg ">
    <div class="col  col-md-6 col-lg-3 col-xl-3 col-12" data-area-id="col-0">
        <div class="opc-Button " style="text-align: center">
            <button type="button" class="btn  btn-info btn-sm" style="">
                TEST
            </button>
        </div>
    </div>
    <div class="col  col-md-6 col-lg-3 col-xl-3 col-12" data-area-id="col-1">
        <div class="opc-Button " style="text-align: center">
            <button type="button" class="btn  btn-info btn-sm" style="">
                TEST2
            </button>
        </div>
    </div>
</div>

und dann sind nachher mehrere Buttons da, für die müsste ich dann sicher immer einzelne scripts erstellen?
Hab ich den falschen Selector und wie kann ich das data-area-id="col-1" da anhängen zur Unterscheidung - einfach mit .col-1 ?
Dafür ist mein JavaScript irgendwie zu eingerostet

 

[css-umsetzung]

Das ist eigentlich ganz einfach und es reicht ein Script für alles, entscheidend ist am Ende ob der originale Bürgermenü überhaupt vorhanden ist, wenn nicht dann muss das etwas anders aussehen.

 

[krahni]

Ist das originale Burger-Menü, der Kunde hat nur den OPC genutzt.
Ich habe es jetzt hin, dass das Burger-Menu zumindest ausklappt (hatte das Script falsch positioniert), bloss wie klappt man die Ebenen gezielt aus?
Und wie unterscheidet man die Buttons, die haben ja den gleichen Selector wenn sie aus dem OPC kommen, kann man die data-area-id auch verwenden beim Aufruf?

 

[css-umsetzung]

Das sind jetzt wieder andere Vorraussetzungen, bei denen man mehr machen muss

du hattest geschrieben

Soll wenn isMobile bei Klick auf Kategorie-Link ausklappen ...

Das hieß für mich, es gibt einen Button "Kategorien" und dann soll das Menü ausklappen.

für das direkte öffnen des mobile Menüs und dann das ausklappen der jeweiligen Kategorie in dem Menü muss man einen Bezugspunkt haben (am besten die ID der Kategorie) um dann diese zu triggern.
Hierfür wäre dann also auch eine geringe Template Anpassung erforderlich.

Das ist jetzt aber nur theoretisch weil das muss man gesehen und am besten besprochen haben damit es gleich beim ersten mal so läuft wie du dir das vorstellst.