创建像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下拉菜单

回答

相关问题