JQueryボタンを押してサイドメニューを左に移動し、アニメーションを使用してコンテンツビューの幅を全幅に変更します

Question

同じ結果を検索していますが、前の質問を削除しました。コードペンは、javascript/bootstrapや他のいくつかのライブラリがロードされているために、実行したときと同じように見えないが、助けてくれることを期待して作成された。基本的に何が起こっているのか、私は何が起こりたいのですか？

2つのパネルに固定されたヘッダーとボトムの内容が必要です。下部には2つの水平パネルが含まれます。左には、ヘッダーパネルのボタンをクリックすると開く/閉じるメニューがあります。 CSSを使って提案された答えを試しましたが、パネルは水平にならずに垂直にしか整列しませんでした。オンライン検索やさまざまなJQueryの提案に見られる他のCSSプロパティを結びつけました。現在、メニューはページの読み込み時に開閉しますが、ページへのリンクがクリックされたときに、ヘッダーのボタンは、クラスを変更してメニューを非表示にするイベントをもはや持っていません。

ご協力いただければ幸いです。

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>

だから、すべてのCSS変換やトランジションでこれを行うことができます。 jqueryアニメートを使用するのは古い方法です。 JavaScriptのアニメーションについては何か言われることがありますが、この場合はCSSが十分です。

こちらがお役に立てば幸いです。