Create jquery dropdown like RDP Menu Bar

Question

I'm not all that familiar with jquery so I'm not quite sure how to do this. Basically, I want a block of html to stay hidden at the top of the page with a ~3px edge sticking out (something to mouseover), and when you mouse over it, the hidden section slides down.

Basically I want it to work like the RDP full screen menu bar works. Any thoughts on what the best way of doing this is?

Answer 1

jquery:

$("#slide").bind("mouseover", function() {
     $(this).animate({
          top: '+=189'                      
     });
}).bind("mouseout", function() {
     $(this).animate({
          top: '-=189'                      
     });
});

style:

   <style type="text/css">
   #slide {
     background:#ccc;
     border:1px solid #000;
     width:200px;
     height:200px;
     padding:10px;
     position:absolute;
     top:-190px;
     }
  </style>

html:

<div id="slide">
test<br>
test<br>
test<br>
test
</div>

Answer 2

You should be able to do it with the help of Jquery UI

http://jqueryui.com/demos/hide/ Pick slide in the dropdown menu.

Answer 3

Thanks for the responses. With a little tweaking of the above code I found out above the .hover() method. The above javascript would then look like

$("#slide").hover(function () {
            $(this).animate({
                top: '+=30'
            });
        }, function () {
            $(this).animate({
                top: '-=30'
            });
        });