JQuery-Button sideMenu nach links verschieben und die Inhaltsansicht auf volle Breite skalieren, animiert funktioniert nicht

Question

Ich habe die vorherige Frage entfernt, um sie etwas abzumildern, obwohl sie nach dem gleichen Ergebnis sucht. Ein Code-Stift wurde in der Hoffnung erstellt, dass es helfen würde, obwohl es nicht so angezeigt wird, als wenn ich es ausführe und denke, dass es vielleicht wegen Javascript/Bootstrap oder einer anderen Bibliothek, die geladen wird. Hier ist im Grunde, was passiert und was ich will.

Ich brauche 2 Panels einen oberen festen Header und unteren Inhalt. Der Boden enthält 2 horizontale Felder. Links enthält ein Menü, das geöffnet/geschlossen wird, wenn auf eine Schaltfläche im Kopfbereich geklickt wird. Versuchte die vorgeschlagene Antwort mit CSS, aber die Panels würden nur vertikal und nicht horizontal ausgerichtet sein. Tied andere CSS-Eigenschaften in Online-Suchen gefunden und verschiedene JQuery-Vorschläge. Momentan öffnet und schließt sich das Menü beim Laden der Seite, aber wenn auf eine Verknüpfung zu einer Seite geklickt wird, hat die Schaltfläche in der Kopfzeile nicht mehr das Ereignis ausgelöst, um die Klasse zu ändern, um das Menü auszublenden.

Jede Hilfe wäre willkommen.

See code pen 

CodePen

Answer 1

$(".js-togglemenu").on("click", function() { 
 
    $("body").toggleClass("menu-open"); 
 
});

body { 
 
margin:0; 
 
} 
 

 
#applicaitonHeader div { 
 
max-height: 50px; 
 
vertical-align: middle; 
 
padding-left: 5px; 
 
} 
 
#MainMenuPanel { 
 
top: 90px; 
 
padding: 0px; 
 
margin: 0px; 
 
position: absolute; 
 
width: auto; 
 
height: auto; 
 
cursor: pointer; 
 

 
transform: translateX(-100%); 
 

 
transition: transform 0.3s; 
 
} 
 
#BodyContainer { 
 
position: absolute; 
 
width: 100%; 
 
height: auto; 
 
} 
 

 
.menu-open #MainMenuPanel { 
 
    transform: translateX(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="js-togglemenu" id="MenuShowHide">toggle menu</button> 
 

 
<div id="applicaitonHeader" class="navbar navbar-inverse navbar-fixed-top"> 
 
Header info goes here 
 
</div> 
 
<div id="MainMenuPanel" class="navbar-fixed-left"> 
 
Menu nodes go here 
 
</div> 
 
<div id="BodyContainer" class="container body-content"> 
 
Body content goes here 
 
</div>

So können Sie alle tun dies mit CSS-Transformation und Übergänge. jquery animate zu verwenden, ist die alte Art, Behauptungen zu machen. Es gibt etwas über Javascript-Animationen zu sagen, aber in diesem Fall ist CSS mehr als genug.

Ich hoffe, das hilft!