Создайте JQuery выпадающий как RDP Menu Bar

Question

Я не настолько знаком с jquery, поэтому я не совсем уверен, как это сделать. По сути, я хочу, чтобы блок html оставался скрытым в верхней части страницы с торчащим краем ~ 3 пикселя (что-то для наведения мыши), а когда вы наводите курсор мыши на него, скрытый раздел скользит вниз.

По сути, я хочу, чтобы он работал так же, как работает полноэкранная строка меню RDP. Любые мысли о том, что лучший способ сделать это?

Answer 1

Вы должны быть в состоянии сделать это с помощью Jquery UI

http://jqueryui.com/demos/hide/ Выберите слайд в раскрывающемся меню.

Answer 2

Спасибо за ответы. Немного подправив приведенный выше код, я обнаружил над методом .hover (). Приведенный выше javascript будет выглядеть как

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

Answer 3

JQuery:

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

стиль:

   <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>