左サイドパネルを折りたたむには？

Question

私は、この左側のパネルが崩壊する方法を探しています。私は地図やサイト上で移動や調整をするために何かを持っていないと思う。左のパネルを折りたたむだけです。理想的には、ポップインしたりポップしたりするのではなく、スライディングアニメーションを使用します。

非常に高く評価されますか？

Answer 1

leftプロパティのCSS transitionを使用すると、この値をスムーズにアニメートできます。次に、leftの値を変更するクラスを追加して削除して、サイドバーの表示を切り替えます。

.left-side-bar { 
    transition: left .8s ease-in; 
} 

.left-side-bar.is-out { 
    left: -16.666%; /* equal to the sidebar's width */ 
} 

デフォルトで表示されます。 is-outクラスを追加/削除するには、JavaScriptを使用して非表示にします。

Answer 2

あなたがしたいかもしれない最初のことは、すばらしいアイコンを得るために、Font AwesomeのようなAPIを使用することです。次のcdnでjQueryで追加できます。

$('head').append('<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">'); 

次に、BS hidden-lg、hidden-md、hidden-smを使用して表示されたハンバーガーを保持するdivを作成します。電話よりも大きなものでそれを隠すため。これはこのようになります。

<div class="mobile_bars hidden-lg hidden-md hidden-sm"> 
<button id="hide_menu"> 
<i class="fa fa-bars" aria-hidden="true"></i> 
</button> 
</div> 

これをjQuery経由で追加することも、単にhtmlに追加することもできます。

この要素を収容するには、次のCSSをサイトCSSに追加します。

<style> 
.mobile_bars { 
    margin-left: 262px; 
    margin-top: -32px; 
} 

/*注*このようなCSSを記述する必要はありません、あなたはjqueryの

.left-side-bar.is-out */ 

.push-in { 
left: -16.666%; /* equal to the sidebar's width */ 
} 

</style> 

に追加します 感が続いて@keithjgrantコードを使用してスクリプトを記述します。

<script> 
// Include Ready function 
ALL is .TOUCH deprecated?? 
$('button#hide_menu').on(function(){ 

$('.left-side-bar').toggle('push-in animated fadeOutLeft'); 

// For some fun add animated.css to your header and add the following classes as well, 

またはhttps://daneden.github.io/animate.css/でクラスを選択してください。

}); 

<script> 

これは私の最終的な結果ではありませんが、あなたに近づけるでしょう。また、私はあなたがこのデスクトップオプションIDを使用するために探している場合は、アイコンを単に変更するか、またはロゴの右側に左矢印アイコンを追加する場合は、モバイルWebサイトのためのソリューションとしてこれを望んでいると仮定しています。どこかに見えるが途中で！