Metronic HTML Template - Sidebar Menü einklappen?

[FrazeColder]

Moin zusammen,

ich habe derzeit ein Problem mit meiner Sidebar und versuche dies zu lösen. Ich verwende das HTML Template Metronic welches (ich glaube) wiederum eine Bootstrap Sidebar verwendet. Derzeit habe ich es schon hinbekommen, dass sich das Menü nach dem laden der Seite wieder eingeklappt mittels einer Zeile in jQuery. Allerdings würde ich das ganze gerne so schreiben, dass das Menü direkt eingeklappt vom Server, also hardcoded, ausgeliefert wird... Und nicht erst im Nachhinein per jQuery.. Denn das sieht der User und das sieht leider nicht so toll aus.. Vor allem ist das auf Dauer echt nervend..

Hiermit klappe ich das Menü ein und aus:

$(document).ready(function() {
    $("#sidebar-menu-toggle").click();
});

Dies ist der Sidebar Wrapper Code:

<div class="page-sidebar-wrapper">
    <div id="page-sidebar-menu" class="page-sidebar navbar-collapse collapse">    
        <ul id="page-sidebar-menu-ul" class="page-sidebar-menu  page-header-fixed page-sidebar-menu-light " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 40px">
            <li class="sidebar-toggler-wrapper hide">
                <div class="sidebar-toggler">
                    <span></span>
                </div>
            </li>

            <li class="nav-item active">
                <a href="javascript:void(0)" class="nav-link "> My Menu </a>
                <span class="selected"></span>
            </li>

            <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link "> My Menu </a>
                <span class="selected"></span>
            </li>

            <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link "> My Menu </a>
                <span class="selected"></span>
            </li>

        </ul>
    </div>
</div>

Das ist der Code für den Toogle Button:

<div id="sidebar-menu-toggle" class="menu-toggler sidebar-toggler">
    <span></span>
</div>

<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
    <span></span>
</a>

Wie ihr sehen könnt, targetiert der Toggle Button, als das '<a href id="page-sidebar-menu"' irgendwie die 'navbar-collapse' Klasse. Daher denke ich, das hat irgendwie irgendwas miteinander zu tun.

Was auch wichtig ist zu wissen, ist der Fakt, dass das Element mit der id 'page-sidebar-menu-ul' seine Klassen

Von:

page-sidebar-menu  page-header-fixed page-sidebar-menu-light

In:

page-sidebar-menu  page-header-fixed page-sidebar-menu-light page-sidebar-menu-closed

ändert. Das ist die einzige inline CSS HTML Zeile, die sich ändert wenn ich den Toggle Button drücke.

Was auch erwähnenswert ist, ist das HTML Template. Ich arbeite auch dem Metronic HTML Template welches auch nochmal zusätzlich mit der Bootstrap Sidebar interagiert. Allerdings kann ich nicht beurteilen wie das genau funktioniert, da meine JS Skills nicht die besten sind..

Ich kann euch leider auch keine funktionierende Version zur Verfügung stellen, da das Template nicht kostenlos ist und ich daher nicht deren JS und CSS Daten einbinden kann.. Aber hier könnt ihr eine funktionierende Demo finden:
https://keenthemes.com/metronic/preview/?page=builder&demo=default

Mein Ziel ist wie gesagt, die Sidebar direkt so vom Server auszuliefern, dass diese schon bereits eingeklappt ist und nicht nachdem die Seite geladen ist per jQuery eingeklappt wird. Wisst ihr wie ich das umsetzten kann?

Würde mich über eure Hilfe freuen!
Mit freundlichen Grüßen und Vielen Dank!

 

[blablub1212]

Dann speicher doch einfach dein Template mit der entsprechenden Klasse: page-sidebar-menu-closed?

Den Button Code drehst du halt um, dass er es erst aufmacht und dann schließt.

 

[BeBur]

Das würde man eher nicht per JS machen, sondern Server-seitig von dem Theme ableiten und dort die entsprechende Anpassung vornehmen (siehe blablub). Ob/wie du ableitest hängt davon ab, was da Server-seitig läuft.
Das Ableiten ist besser für zukünftige Updates an 'woran auch immer', technisch gesehen kannst du natürlich auch das Theme an sich direkt bearbeiten.

PS.:

Das ist die einzige inline CSS HTML Zeile, die sich ändert wenn ich den Toggle Button drücke.

Ja und das ist auch absolut naheliegend so und entsprechend die Klasse/Attribut, die du hier in der naheliegenden Weise verwenden musst.

 

[Tourgott]

Wieso noch ein Thread zum gleichen Thema? Vielleicht eher mal den anderen Leuten danken, die dir bereits geholfen haben.

 

[FrazeColder]

Dann speicher doch einfach dein Template mit der entsprechenden Klasse: page-sidebar-menu-closed?

Den Button Code drehst du halt um, dass er es erst aufmacht und dann schließt.

Das habe ich schon ausprobiert.. funktioniert leider nicht.. Da JS bzw. das Theme wohl noch andere Funktionen oder Klassen ändert.. Und daher auch der Thread, vllt. kennt jemand diese?

Das würde man eher nicht per JS machen, sondern Server-seitig von dem Theme ableiten und dort die entsprechende Anpassung vornehmen (siehe blablub). Ob/wie du ableitest hängt davon ab, was da Server-seitig läuft.
Das Ableiten ist besser für zukünftige Updates an 'woran auch immer', technisch gesehen kannst du natürlich auch das Theme an sich direkt bearbeiten.

PS.:

Ja und das ist auch absolut naheliegend so und entsprechend die Klasse/Attribut, die du hier in der naheliegenden Weise verwenden musst.

So hab ich das auch vor, weiß nur nicht wie ich das umsetzten soll und welche Klassen ich da ansprechen muss..

 

[BeBur]

Selbe Antwort wie in deinem anderen Thread: WebDev Tools / Console.
Ich vermute aber eher, dass du was übersehen hast und es 1:1 so funktioniert, wie du selber schon geschrieben hast und wie blablub auch etwas ausgeführt hat.

 

[FrazeColder]

Ich habe nun schon mehrmals versucht es heraus zu finden.. finde es leider nicht.. :/