幻燈片效果的導航菜單

這是我工作的網站..幻燈片效果的導航菜單

http://jasalounge.com/test/home/

我編寫導航菜單基本JavaScript和CSS工作，但我想它正確地做具有滑落效果。

我也在使用2個導航菜單嘗試創建這種效果。我知道我不應該用這種方式來編寫代碼，但這是我能夠實現它的唯一方法。我真的需要一些幫助來解決這個問題。

該網站目前做我想做的事情，除了單擊菜單按鈕時的幻燈片效果。

如果有人能幫助我，我會很感激。

這是我想要我的菜單做的一個例子。

http://responsivemobilemenu.com/en/

來源

2014-03-05 ijustchill

使用此鏈接我無法在菜單http://responsivemobilemenu.com/en/上看到任何滑動效果。你想要什麼菜單淡入得到的鼠標懸停或東西else.please闡述 – monu

在這裏徘徊菜單上往下滑並再次點擊它的幻燈片up.This只是一個樣本。你也可以通過「點擊」來完成。

$(function(){ 
    $('.dropdown-1').hide(); 
    $('#menu').hover(function(){ 
     $('.dropdown-1').slideDown('medium'); 
    }, function(){ 
     $('.dropdown-1').slideUp('medium'); 
    }); 
})

http://jsfiddle.net/gurPn/77/

來源

2014-03-05 07:23:14 monu

$（函數（）{ \t \t如果（window.innerWidth <= 760）{ \t \t $（ '＃headerNav'）。隱藏（） ; \t \t} \t \t $（「＃menuIcon」）點擊（函數（）{ \t \t $（「＃headerNav」）的slideToggle（「快」）; \t \t}）; \t $（window）.resize（function（）{ \t \t \t \t如果（window.innerWidth> 760）{ \t \t $（「＃headerNav」）removeAttr（「風格」）。 \t \t} \t \t \t \t}）; \t \t \t}） – ijustchill

這是回答我的問題。

$(function(){ 
if(window.innerWidth <= 760) { 
    $('#headerNav').hide(); 
} 


    $("#menuIcon").click(function(){ 
    $("#headerNav").slideToggle("fast"); 
    }); 

    $(window).resize(function(){ 

    if(window.innerWidth > 760) { 
    $("#headerNav").removeAttr("style"); 
    } 

    }); 

})

來源

2014-03-06 07:43:48 ijustchill

幻燈片效果的導航菜單

回答

相關問題