JavaScript JQUERYまたはCSSを使用してExpandable Top Barを作成する

Question

CSSおよびJQUERYを使用してFixed Tob BarまたはBootom Barメニューをドロップダウンメニューにすることができます。 Android Phoneと同じように、拡張可能なトップバーを作成することは可能ですか？ Expandableは、トップバーメニューを下にドラッグすると、ページの最下部まで領域を拡大する必要があることを意味します。

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