列表導航，幻燈片向左打開，幻燈片向右關閉

我目前有一個簡單的列表導航，用戶單擊並導航滑下並滑動到關閉。我想知道是否有一種方法讓導航列表滑動到左側打開，然後向右滑動以關閉列表導航。使用我當前的jQuery代碼，我可以修改它，讓列表nav向左滑動打開，然後向右滑動關閉。任何幫助將不勝感激！謝謝！這裏是我目前的代碼和鏈接到我的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'); 
    } 
}); 
});

來源

2013-07-29 jsavage980

[這是我5分鐘快速移交（http://jsfiddle.net/QmEcs/7/） – Ohgodwhy

您可以使用動畫和邊距從右向左滑動。

.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-29 02:14:08

感謝李最大值！正是我正在尋找的！感謝幫助！ – jsavage980

max li - 我剛剛更新了我的小提琴....請看看和任何幫助將不勝感激 – jsavage980

http://jsfiddle.net/eGAYt/1/ –

列表導航，幻燈片向左打開，幻燈片向右關閉

回答

相關問題