javascript - 菜单动画从顶部功能滑动

Question

我想添加一个像这个演示站点中的菜单一样的菜单 Here
如您所见，它从页面顶部下降，我想知道这是仅使用 CSS3 还是 . 如果有人可以向我展示一个简单的功能，这样我就可以开始使用它，那就太好了!

编辑:好的，我想我找到了它的代码片段，我仍然想知道这是否是一个好方法，如果有人可以使它更简单，似乎有很多代码只是为了那个< br/>

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();  
        }   
    }
});`

Answer 1

是的，这是可以做到的。您可以使用 CSS 过渡/关键帧和点击事件。

代码

html

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

CSS

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

.hidden {
  top: -25px;
}

js

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

解释

您的菜单固定在页面顶部。每当您切换显示/隐藏它的按钮时，您都可以添加一个 css 类来更改元素的位置。因为元素上有 transition，它会动画到新位置。这也可以使用关键帧而不是过渡来完成，以获得更多控制。

css transition

css keyframes