javascript - JavaScriptJQUERYまたはCSSを使用して拡張可能なトップバーを作成する

Question

CSSとJQUERYを使用して、Fixed TobBarまたはBootomBarメニュー、ドロップダウンメニューを作成できます。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);
});​