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?

score 0 · Accepted Answer · answered Mar 26 '10 at 05:08

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>

This looks great. One problem though, it doesn't stay down on mouseover. It bounces up and down. Check out communityftw.com top right. — Steve Syfuhs, Mar 26 '10 at 05:28

score 0 · Answer 2 · answered Mar 26 '10 at 05:31

0

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

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

answered Mar 26 '10 at 05:31

Raj Kaimal

8,304
27
18

score 0 · Answer 3 · answered Mar 26 '10 at 13:48

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

Create jquery dropdown like RDP Menu Bar

3 Answers3