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