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

标签 javascript jquery css

<分区>

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

最佳答案

当然可以复制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);
});​

关于javascript - 使用 JavaScript JQUERY 或 CSS 制作可扩展的顶部栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10546802/

相关文章:

javascript - angularjs无法动态调用函数

javascript - 按 Div Id 显示/隐藏

javascript - 如何在 animate 中将 "+="赋值运算符与变量一起使用?

javascript - 将 jQuery 自动完成的值发送回 PHP

javascript - Javascript 将类更改为靠近他祖父的 div

css - 垂直对齐 100vh 容器内的文本

javascript - 在每秒更新的网页上显示一个 txt 文件

javascript - 如何找到与两个数组相交的所有对象?

javascript - 使用 PHP 数据库中的值自动突出显示

jquery - 需要知道 jQuery 中的最大宽度值是否以 % 或 px 为单位