slide divを#pxでマウスを左に移動

Question

マウスを外したときにメニューdivスライド200pxを残そうとしています。

私は、次のHTMLの構造を有する：

<nav id="menuLeft"> 
    <div id="menuLeft-toggle"> 
    </div> 
    <div class="panel"> 
     accordion menu in here 
    </div> 
    <div class="panel"> 
     accordion menu in here 
    </div> 

    <div class="panel"> 
     accordion menu in here 
    </div> 
</nav> 

私は（それがeラーニングのためです）トグルdiv要素と、いくつかのメニューパネルを持っています。

• NAVのDIVは、画面の左側にあり、高 100％を広い200pxのある
• menuLeft-トグルDIVは、右側を下に実行次のよう

  レイアウトであります menuLeft NAVのdiv

• パネルのdivは、私はすでにトンにJS（hasClassとremoveClass）を使用していますmenuLeft div要素内で垂直に

を積み重ねますナビゲーションdivを開くoggleを開き、menuLeft-toggle divをクリックすると手動で閉じられますが、マウスのNav divを200pxずつ左に自動隠す（スライドさせて）トグルdivを非表示にしないようにする必要があります。

divスライド（例：.hide（400））を200pxで作成しても、menuLeft-toggle divをクリックしても開くことができますか？

あなたのお手伝いがありがとうございます。

Answer 1

これはあなたが探しているものであるかどうかわかりませんが、:hover疑似クラスを使用すると、メニューを非表示にすることができます。

メニューのデフォルトは「非表示」 - （画面外）です。 :hoverクラスを適用すると、要素のleftプロパティがゼロになります。

https://jsfiddle.net/fhfe1gey/

Answer 2

まず、あなたは2秒、のは言わせ、それをのCSS遷移を与えたいと思うでしょう。これはスライドするのに2秒かかりますので、ちょうど側にスナップしているようには見えません。明らかに、あなたはこれをあなたが好きなものに変えることができます。あなたがそれを望まないなら、あなたはそれを必要としません。

#menuLeft{ 
    transition: 2s; 
} 

マウス休暇に200pxのが残しdiv移動するには：ボタンがクリックされたときに再び元の位置に戻しdiv動きを作るために

function moveMenuToLeft(){ 
    document.getElementById('menuLeft').style.left = '-200px'; //change 'left' to 'marginLeft' if it isnt fixed on the screen 
} 
document.getElementById('menuLeft').onmouseleave = moveMenuToLeft; 

：以来

function moveMenuBack(){ 
    document.getElementById('menuLeft').style.left = '0'; //change 'left' to 'marginLeft' if needed 
} 
document.getElementById('menuLeft-toggle').onclick = moveMenuBack; 

をdivの幅は400pxですが、目に見えるようにするには200px、左に200px移動するだけで200pxが表示されます。