使用JavaScript JQUERY或CSS创建可扩展的顶部栏

可以使用CSS和JQUERY制作固定Tob栏或Bootom栏菜单、下拉菜单。有没有可能像Android手机一样创建一个可扩展的顶部栏。

---

可扩展意味着如果我向下拖动顶部栏菜单，那么它应该将其区域扩展到页面底部。

当然可以复制Android通知栏效果，您只需尝试一下。实际上，你可以在悬停上做类似的效果。像这样：

html:

javascript:

$("#expandable").hover(function() {
    $(this).stop().animate({"height":"300px"},1000);
}, function() {
    $(this).stop().animate({"height":"50px"},1000);
});​

---

可能的对你们试过什么？你们的意思是顶部菜单栏也应该随着页面向下滚动而下降吗？不完全像这样，但正如在android手机中看到的，我希望我的页面可以看到一个可扩展的顶部栏。@Joseph是的，但如何？请建议任何教程，如果你知道！转到jQuery mobile，并使用firebug查看页眉和页脚的显示方式。谢谢你…它真的很有帮助。。。

#expandable {
    width: 100%; height: 50px;
    background: #ddd;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 17px;
}
#expandable span {
    display: block;
    width: 100%; height: 50px;
    line-height: 50px; text-align: center;
    cursor: pointer;
}
#expandable ul {
    width: 100%;
    line-height: 50px;
}
​

$("#expandable").hover(function() {
    $(this).stop().animate({"height":"300px"},1000);
}, function() {
    $(this).stop().animate({"height":"50px"},1000);
});​