0

現在、ユーザーがクリックすると、ナビゲーションがスライドダウンしてスライドアップして閉じる単純なリストナビゲーションがあります。ナビゲーション リストを左にスライドして開き、右にスライドしてリスト ナビゲーションを閉じる方法があるかどうか疑問に思っていました。現在のjqueryコードを使用して、リストナビゲーションを左にスライドして開き、右にスライドして閉じるように変更できます。どんな助けでも大歓迎です！ありがとう！これが私の現在のコードと私のjsフィドルへのリンクですhttp://jsfiddle.net/jsavage/eGAYt/

これが私のjqueryコードです。

$(function(){
 var $menuContent = $(".list-menu, .list-menu-registration");
 $("#menu-list-btn").click(function(e){
   e.preventDefault();
   if($menuContent.hasClass('opened')){
    $menuContent.slideUp('slow').toggleClass('closed opened');
  } else {
    $menuContent.slideDown('slow').toggleClass('closed opened');
  }
 });
 });
4

1 に答える 1

1

アニメーションと余白を使用して、右から左にスライドインできます。

.drop-down-nav {
    float: left;
    width: 640px; 
    height: 159px;
    background-color:grey;  
    padding: 1px 0;
    opacity:0;
    margin-left:600px;
    clear: both;

}

jquery:

var $itemContent = $('.drop-down-nav');
$('.drop-down-btn-up, .drop-down-btn').click(function(e){
  e.preventDefault();
    if($itemContent.css('margin-left') == "600px"){
         $('.drop-down-nav').animate({
                  marginLeft: '0px',
                  opacity:1
              })

    } else {
         $('.drop-down-nav').animate({
                  marginLeft: '600px',
                  opacity:0
              });
    }
});

http://jsfiddle.net/QmEcs/8/

于 2013-07-29T02:14:08.333 に答える