Créer une liste déroulante jquery comme Barre de menus RDP

Question

Je ne connais pas très bien jquery, je ne sais pas trop comment faire. Fondamentalement, je veux qu'un bloc de html reste caché en haut de la page avec un bord de ~ 3px qui dépasse (quelque chose sur mouseover), et quand vous le survolez, la section cachée glisse vers le bas. Fondamentalement, je veux que cela fonctionne comme la barre de menu plein écran RDP fonctionne. Des pensées sur ce que la meilleure façon de faire est?

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

Vous devriez être en mesure de le faire avec l'aide de JQuery UI

http://jqueryui.com/demos/hide/ Sélectionnez une diapositive dans le menu déroulant.

Answer 3

Merci pour les réponses. Avec un peu de peaufinage du code ci-dessus, j'ai découvert ci-dessus la méthode .hover(). Le javascript ci-dessus ressemblerait alors à

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