2009.03 15

jQuery 渐变下拉菜单

标签: ,
jQuery

ZhouGe小朋友在jQuery Slide Show – jQuery幻灯片效果这篇文章中留言说要用jQuery写一个像我博客一样的RSS feed下拉效果，博客也没更新，就顺便把这个当教程资源发出来吧。

rss

最重要的链接在这里：效果预览 | jQuery源变下拉菜单源代码

利用jQuery来实现，其实就几行代码的事。即便如此，由于js语言的思维方式，还是一直没有把握好，加上一个css的问题，导致弄了好久才出来效果。这里主要是利目标在鼠标经过时（.hover()）利用slideToggle() 、slideUp()来显示原来隐藏着的内容：

$(function(){
$(".dropdown").hover(
function(){ $("li ul").slideToggle(800);},
function(){$("li ul").slideUp(1000)}
)
})

还是那句话，如果你有更好的方法。可以分享出来，让更多人受益。让更多人学习。

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » jQuery »

44

  1. 2009.03.15 11:10 pm
    Lorz(visit): [回复]

    我还纳闷呢。怎么会无法访问捏。看来我挤过来了

  2. 2009.03.15 11:16 pm
    Lorz(visit): [回复]

    这个 demo 的问题是，如果我用鼠标在订阅图标上晃一晃，那个列表就开始抽筋似的上上下下。

  3. 2009.03.15 11:21 pm
    sofish(visit): [回复]

    @Lorz: 不知道怎么解决=,=，囧。

  4. 2009.03.15 11:49 pm
    摩摩诘(visit): [回复]

    看不懂,过来仰望一下…

  5. 2009.03.16 12:35 am
    fisio(visit): [回复]

    @摩摩诘: 我也想说

  6. 2009.03.16 7:30 am
    leehow这个VIP(visit): [回复]

    下拉的很有感觉…╮(╯▽╰)╭…

  7. 2009.03.16 10:04 am
    囧囧有神的(visit): [回复]

    我的adblock把JS文件都屏蔽了@_@
    原来这里有下拉菜单的⊙﹏⊙b
    我觉得还是纯CSS的那个比较有爱~

  8. 2009.03.16 10:29 am
    hiphone(visit): [回复]

    不错

  9. 2009.03.16 11:49 am
    会律博客(visit): [回复]

    抽筋是的下拉菜单，感觉很棒！

  10. 2009.03.16 11:59 am
    zhouge(visit): [回复]

    谢谢 sofish ,感激ing……

  11. 2009.03.16 12:33 pm
    吖Bee(visit): [回复]

    我爱这个啊~~~最近就是想怎么样用jQuery来实现这个效果~

  12. 2009.03.16 12:57 pm
    ZH CEXO(visit): [回复]

    你的博客上用的是另一种东西吧，比你自己写的这个稍微稳定一点哦~

  13. 2009.03.16 3:16 pm
    Insen(visit): [回复]

    @Lorz:如果只是单纯的show/hide就不会这样子，不知道该怎么解决…

  14. 2009.03.16 3:37 pm
    小朋友说(visit): [回复]

    语义上来讲，还是这样好一点
    function(){ $(“li ul”).slideDown(800);},
    function(){$(“li ul”).slideUp(1000)}

  15. 2009.03.16 4:49 pm
    火星人(visit): [回复]

    学习了。

  16. 2009.03.16 6:25 pm
    Lorz小朋友说(visit): [回复]

    在 OUT 事件函数里加个判断：
    if($(“li ul”).queue().length<=1)
    $(“li ul”).slideToggle(800);

    这样虽然避免了菜单独自抽筋儿，但如果用鼠标在上面晃来晃去，最后指针停在图标上面时，这个下拉列表没有显示出来。当然，我们完全可以把这个图标搞小一点，减小这种情况的概率。

    实际上，我觉得，估计没有多少人会跟我一样无聊到用鼠标来调戏这个下拉菜单……

  17. 2009.03.16 7:00 pm
    Yu(visit): [回复]

    维基了才知道jQuery是一个JavaScript类库,学习中.

  18. 2009.03.16 9:29 pm
    Leeiio(visit): [回复]

    我把鼠標反覆地在demo的按鈕上揉搓，於是他自個在那裡動了，我很邪惡～

  19. 2009.03.16 10:20 pm
    sofish(visit): [回复]

    @小朋友说: 哦耶，是的，哈哈！

    @Lorz小朋友说: Lorz自己加一个小朋友，真是个好孩子。方面更好。哈哈。

  20. 2009.03.17 11:10 am
    toydime(visit): [回复]

    慢慢试一下，新的模板有用

  21. 2009.03.17 3:08 pm
    welee(visit): [回复]

    想想看怎么用到我的新主题，感谢 sofish 啊~

  22. 2009.03.18 6:07 pm
    西风(visit): [回复]

    没看懂······

  23. 2009.03.18 10:35 pm
    Netforce(visit): [回复]

    wordpress的魅力在于你我都可以创造。

  24. 2009.03.19 9:01 am
    周公解梦(visit): [回复]

    我很希望你能更新你的博客再快一点@

  25. 2009.03.19 8:15 pm
    小墨(visit): [回复]

    这几天正在看javascript呢。。看原版书看着头晕。。来你这找书了。。。

  26. 2009.03.20 9:46 am
    菜谱网(visit): [回复]

    今天刚好要用下拉菜单，js的不错，收藏了！！！！

  27. 2009.03.20 8:22 pm
    disinfeqt(visit): [回复]

    超级漂亮！我也要引入JQ架构了…

  28. 2009.03.20 11:54 pm
    shaowei(visit): [回复]

    好像记得longhao也分享过这个东东哦？

  29. 2009.03.20 11:55 pm
    shaowei(visit): [回复]

    sofish害的粉丝们着急了，哈哈

  30. 2009.03.24 4:05 pm
    电影天堂(visit): [回复]

    下载下来，有空再研究下，哈哈。

  31. 2009.04.08 3:47 pm
    YCF.name(visit): [回复]

    看了下代码，原来自己也写了一个，几乎一样的东西！
    对于GUI，jQuery貌似不是强项啊！不过效果实现起来也不是很难，关键还是效果的创意吧！

  32. 2009.04.10 11:41 am
    WordPress啦(visit): [回复]

    Jquery功能确实不错，最近在学习EXT，感觉很棒，里面丰富的内容，很牛X

  33. 2009.04.14 3:20 pm
    止戈(visit): [回复]

    最近一直在学wordpress,想在里面用上jquery

  34. 2009.05.16 2:38 pm
    afeiship(visit): [回复]

    你像亚当一样的无私！

  35. 2009.06.15 11:28 pm
    欧莱凯主题网(visit): [回复]

    欧莱凯主题网支持您！

  36. 2009.06.17 2:27 pm
    琳儿生活家居(visit): [回复]

    不错..受用..简单方便…..刚好在找这个东东..呵呵..

  37. 2009.06.27 3:57 pm
    蚂蚁，以用户为中心的设计(visit): [回复]

    web很好，但是我想要一个更好的效果！

  38. 2009.06.28 1:51 pm
    bolo(visit): [回复]

    好东西，马上扒走

  39. 2009.09.07 9:17 pm
    niger(visit): [回复]

    这个 demo 的问题是，如果我用鼠标在订阅图标上晃一晃，那个列表就开始抽筋似的上上下下。

  40. 2009.10.26 7:31 am
    Emrah öztürk(visit): [回复]

    欧莱凯主题网支持您！

  41. 2009.11.16 2:42 am
    铵铵(visit): [回复]

    谢谢博主.

  42. 2010.05.04 10:23 am
    Joke(visit): [回复]

    但是这个貌似解决不了IE6下拉框的问题！这点很致命啊！

  43. 2010.05.04 3:53 pm
    lik(visit): [回复]

    有个 jQuery 的插件叫 HoverIntent，可以设置鼠标经过时多长时间才触发事件，或者自己用 setTimeout 和 clearTimeout 写下，就能实现延迟效果。

    在鼠标经过和离开时都可以加上延迟。

  44. 2010.07.15 11:55 am
    洁(visit): [回复]

    zww传送过来，收藏先

Additional comments powered by BackType