創建像RDP菜單欄的jQuery下拉菜單

我不是所有人都熟悉jQuery，所以我不太清楚如何做到這一點。基本上，我想要一塊html保持隱藏在頁面的頂部，並有一個〜3px的邊緣突出（鼠標懸停的東西），當你將鼠標懸停在它上面時，隱藏部分會滑落。創建像RDP菜單欄的jQuery下拉菜單

基本上我希望它能像RDP全屏菜單欄一樣工作。想知道做這件事的最好方法是什麼？

2010-03-26 Steve Syfuhs

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

來源

2010-03-26 05:08:52 enduro

這看起來不錯。一個問題，但它不停留在鼠標懸停。它反覆上下跳動。查看communityftw.com右上角。 – 2010-03-26 05:28:59

看起來像你制定出來的。不錯的工作。 – enduro 2010-03-26 19:05:57

你應該能夠與jQuery UI的

http://jqueryui.com/demos/hide/幫助做在下拉菜單中選擇幻燈片。

來源

2010-03-26 05:31:53

感謝您的回覆。稍微調整一下上面的代碼，我發現在.hover（）方法之上。上面的javascript會看起來像

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

來源

2010-03-26 13:48:41

創建像RDP菜單欄的jQuery下拉菜單

回答

相關問題