jQueryでスライドメニュー（右から左/右）を作成する方法

Question

jQueryでスライドメニューを作成しようとしていました。デフォルトでは、ページが読み込まれるとメニューが開きます。それをクリックするとメニューが右から左にスライドします。しかし、私はそれをデフォルトの位置にどのように押し込むことができるのか分かりません。またはそれをどのように前後に押し進めることができるか。

JSフィドル：http://jsfiddle.net/pPf7N/307/

HTML

<aside class="asideMenu"> 

i'm the menu click me 

</aside> 

jQueryの

$('.asideMenu').on('click', function(){ 
    $(this).css({ 
    'left':'-200px' 
    }); 
    $(this).html('<span class="openMenu"> open menu -> </span>'); 
    $('.openMenu').on('click', function(){ 
    alert('want to push the menu to its default position.'); 
    }); 
}); 

Answer 1

この1とあなたのJSを変更してみてください、それが役に立つかもしれ

$('.asideMenu').click(function() { 
 
    var clicks = $(this).data('clicks'); 
 
    if (clicks) { 
 
    $(this).css({ 
 
    \t 'left':'-10px' 
 
    }); 
 
    $(this).html('<span class="openMenu"> open menu -> </span>'); 
 
    } else { 
 
    $('.asideMenu').css({ 
 
    \t 'left':'-200px' 
 
    }); 
 
    } 
 
    $(this).data("clicks", !clicks); 
 
});

aside{ 
 
    height:900px; 
 
    width:300px; 
 
    position:absolute; 
 
    background-color:#ddd; 
 
    margin:0px; 
 
    padding:0px; 
 
    cursor:pointer; 
 
    transition:all 0.5s ease; 
 
    -webkit-transition:all 0.5s ease; 
 
} 
 
.openMenu{ 
 
    color:#000; 
 
    float:right; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<aside class="asideMenu"> 
 

 
i'm the menu click me 
 
    
 
</aside>

Answer 2

これは実施例である、そしてあなたはそれがあなたのニーズに応じて適用するために手の込んだことができます。それが役に立てば幸い。

$('.asideMenu').on('click', function() { 
 
    if ($(this).hasClass('menuClosed')) { 
 
    $(this).removeClass('menuClosed'); 
 
    } else { 
 
    $(this).addClass('menuClosed'); 
 
    } 
 
});

aside { 
 
    height: 900px; 
 
    width: 300px; 
 
    position: absolute; 
 
    background-color: #ddd; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    left: 0px; 
    cursor: pointer; 
 
    transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
} 
 
.menuClosed { 
 
    left: -200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<aside class="asideMenu"> 
 
    i'm the menu click me 
 
</aside>