javascript - 来自 Mozilla.com 网站的倒置标签，如 tabzilla

Question

Mozilla.com 在其站点顶部有此选项卡，您可以单击该选项卡并下拉菜单。我有一个客户希望我从页面的下半部分开始做同样的事情，但颠倒过来。显然这是一个非常艰难的要求。我如何制作像 tabzilla 这样的东西，它会上升并重叠或推开内容？谢谢!

更新:我爱你们。

编辑:http://hemakessites.com/mayukh/4/为什么顶部的“Sign In/Register”向下弹出，而底部的“Toggle”弹出？除了 css 中的“顶部”和“底部”之外，我没有看到其他区别。这如何改变弹出窗口的方向？

此外，单击“337-9147”将展开菜单。我只希望按钮区域可点击。我怎样才能做到这一点？

你们太棒了，我会在有时间的时候在这里回答一些问题来返回你们。

Answer 1

我采用了与其他人类似的方法，将 div 设置为在屏幕底部具有固定或绝对位置(取决于选项卡是否应始终可见，或仅在最底部)。然后，您可以编写一些非常简单的 javascript 来改变元素的高度，并且由于底部是固定的，它会导致选项卡上升到屏幕中。

基本上你需要的就是

.container{
 position: absolute;
 bottom: -1px;    
} 

和

$('.container').toggle(function(){
    $(this).animate({height:'205px'}, 500)
},function(){
    $(this).animate({height:'20px'}, 200)           
});  

这是一个 jsfiddle demo .