javascript - 使用 JavaScript JQUERY 或 CSS 制作可扩展的顶栏

Question

可以使用 CSS 和 JQUERY 制作 Fixed Tob Bar 或 Bootom Bar 菜单、下拉菜单。是否可以像在 Android 手机中一样创建可扩展的顶部栏。可扩展意味着如果我向下拖动顶部栏菜单，那么它应该将其区域扩展到页面底部。

Answer 1

当然可以复制Android通知栏效果，你只需要尝试一下。实际上，您可以对悬停做类似的效果。像这样：http: //jsfiddle.net/3shEE/

html:

<div id="expandable">
    <span>Hover over me</span>

    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
    </ul>
</div>​

CSS：

#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;
}
​

javascript:

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