Question

It is possible to make Fixed Tob Bar or Bootom Bar menu, Drop Down menu using CSS and JQUERY. Is it possible to create a Expandable Top Bar just like in Android Phone.
Expandable means if I drag the Top Bar menu down, then it should expand its area upto the bottom of the page.

Answer 1

Of course it’s possible to replicate the Android notification bar effect, you just have to try. You could do a similar effect on hover, actually. Like this: 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);
});​