頂部功能菜單動畫幻燈片

我想添加一個像這個演示網站的菜單Here
它從頁面頂部下降，你可以看到，我想知道這是否與只有CSS3或。如果有人能給我一個簡單的功能，所以我可以離開它，這將是很好的！頂部功能菜單動畫幻燈片

編輯：好的我找到了它的代碼片段我想，我仍然想知道這是否是一個很好的方法來做到這一點，如果有人可以使這個更簡單，看起來像很多代碼只是爲了

var isUp = false; 
var navHeight = $('#navContainer').height(); 
    var hideHeight = navHeight - 50; 

$('#arrowLink a').click(function(e){ 
    e.preventDefault(); 
    navHeight = $('#navContainer').height(); 
    hideHeight = navHeight - 50; 

    $('.tooltip').remove(); 
    if(!isUp){   
     $(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_bottom.png'); 
     $(this).find('img').attr('title',showNav); 
     $("#navContainer").animate({   
      top: '-='+ hideHeight + 'px' 
     }, 500, "swing", function() { 
      isUp = true; 
     }); 
    }else{ 
     $(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_top.png'); 
     $(this).find('img').attr('title',hideNav); 
     $("#navContainer").animate({   
      top: "0" 
     }, 500, "swing", function() { 
      isUp = false; 
     });    


     if($('body').hasClass('body_show_content')) 
     { 
      $('#mainContainer').fadeIn(); 
     } 
    } 
});`

來源

2015-01-08 Abdel hakeem

CSS3和jQuery解決方案都是可能的，但JS看起來更加兼容 – vladkras

是的，可以這樣做。你可以使用CSS轉換/關鍵幀和一個點擊事件。

代碼

HTML

<div id="container hidden">Something</div>

CSS

#container { 
    postion:fixed; 
    -webkit-transition: all 2s; 
    transition: all 2s; 
} 

.hidden { 
    top: -25px; 
}

$('#container').click(function(){ 
    $(this).toggleClass('hidden'); 
});

Explan ation

您的菜單固定在頁面頂部。無論何時切換顯示/隱藏它的按鈕，都可以添加一個改變元素位置的CSS類。因爲元素上有transition，它將動畫到該新位置。這也可以通過使用關鍵幀而不是過渡來實現更多的控制。

css transition

css keyframes

來源

2015-01-08 04:21:49 GGhe

如果你想要實現這個使用純CSS，你需要使用的transition效果。查看提供了類似的東西的公平的小提琴。

FIDDLE

來源

2015-01-08 05:11:25 Aditya

頂部功能菜單動畫幻燈片

回答

相關問題