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

Answer 2

如果您想使用纯css实现此目的，则需要使用transition效果。查看小提琴，它可以提供类似的东西。

FIDDLE

从顶部功能菜单动画幻灯片

2 个答案: