Home > Design > 13款珍品CSS+Javascript菜单
2009June . 5th

13款珍品CSS+Javascript菜单

每个 web 设计者都希望设计出富有创造性的导航菜单。现在为您呈现 13 个稀奇的 Javascript CSS 菜单,你可以通过修改来设计出符合自己意愿的个性菜单。

1) 性感滑动菜单(Sexy Sliding Menu) - 一种由 Mootools 制作,另外一种使用 scrip.aculo.us 制作的。
Sexy Sliding Menu.gif.jpg
演示:Mootols 版本
演示:Script.aculo.us 版本

2) FastFind Menu Script - 此菜单使用 jQuery 库制作,基于动态 Ajax 相应,嵌套式菜单。
FastFind Menu Script.gif.jpg
演示: FastFind Menu

3) Webber 2.0 Dock Menu - 类似 Apple Mac 系统中船坞类型的导航菜单。
Webber 2.0 Dock Menu.gif.jpg
演示: Webber 2.0 Dock Menu

4) Phatfusion – 图片菜单 - 采用 Javascript的图片菜单,单击进行选择或者关闭。
Phatfusion - Image Menu.jpg
演示: Phatfusion – Image Menu
演示: Mootools 版本(采用 XML 分析器)

5)可拖拽排序的树状菜单
可拖拽排序的树状菜单.gif.jpg
演示:http://extjs.com/deploy/dev/examples/tree/reorder.html

6)自定义菜单事件 - 采用 Yahoo!UI 框架搭建,由 Think Vitamin 团队制作。
自定义菜单事件.gif.jpg
演示:http://www.thinkvitamin.com/misc/yui-demos/demo-10.html

7) 右键菜单功能 - 采用Yahoo!UI框架制作。
右键菜单功能.jpg
演示:http://yura.thinkweb2.com/scripting/contextMenu/

8) LavaLamp jQuery 滑动菜单 - 采用 jQuery 框架构建。
LavaLamp jQuery 滑动菜单.gif.jpg
演示:LavaLamp jQuery 滑动菜单
演示: Mootools Fancy Menu

9) Slashdot 菜单 - 著名科技网站 Slashdot 样式的菜单效果。
Slashdot 菜单.gif.jpg
演示:http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

10) Mootools 菜单
Mootools 菜单.jpg
演示:http://www.artviper.eu/mootoolsmenu/

11) CSS Dock Menu - 真正仿 Mac 系统的 Dock 菜单。
CSS Dock Menu.gif.jpg
演示:http://www.ndesign-studio.com/blog/mac/css-dock-menu

12) jQuery插件:Sliding Menu
jQuery插件:Sliding Menu.gif.jpg
演示:http://www.getintothis.com/pub/projects/rb_menu/

13) 可收缩菜单
可收缩菜单.gif.jpg
演示:http://www.456bereastreet.com/lab/accessible-expanding-collapsing-menu/

推荐到豆瓣
  1. 2009June . 5th - 12:15 PM

    啥时候让我掌握了就牛逼了……JavaScript和PHP这类一直没空去看,目前只停留在会一点html和CSS…功课太忙了。

  2. 2009June . 5th - 12:45 PM

    @Jutoy
    我也是呢,js只会改不会写,最近才懂了一些简单的php

  3. 2009June . 5th - 6:43 PM

    我喜欢第一个 好喜欢

  4. 2009June . 5th - 8:54 PM

    4和8都很不错!~
    最后一个我用过!~有点碍事!~不方便

  5. 2009June . 5th - 9:09 PM

    1 4 9 11 13都见过,也尝试过,不过没办法和我的主题融合,个人最喜欢4,那个效果类似微软的官网,不过没有SilverLight的效果好。

  6. 2009June . 5th - 9:13 PM

    @卢松松
    @LAONB
    正想把博客的菜单栏强化呢,所以找到了这些东西

  7. 2009June . 5th - 10:18 PM

    有些纯CSS也可以实现的。

  8. 2009June . 6th - 12:12 AM

    虽然有些纯CSS是可以模仿这些效果。可是,太麻烦了。不是吗?

    JS和CSS到底用什么?动作与展示分离是最难的。 :shock:

  9. 2009June . 6th - 8:32 AM

    感谢分享这些,就需要这个呢!

  10. 2009June . 6th - 9:18 AM

    @yaugle
    喜欢就拿走吧,欢迎常来

  11. 2009June . 6th - 10:20 AM

    好强 啊 !! 收藏 !!

  12. 2009June . 6th - 8:47 PM

    cool,喜欢那个apple导航条

  13. 2009June . 7th - 12:08 AM

    55555.没早点看到,前几天还在到处找呢。。。。

  14. 2009June . 7th - 11:20 AM

    @zzz
    现在看到也不迟嘛

  15. 2009June . 16th - 12:02 AM

    搜索做的不是很漂亮
    大大的~~

  16. 2009June . 16th - 4:50 PM

    Hi! I like your srticle and I would like very much to read some more information on this issue. Will you post some more?

  17. 2009June . 16th - 5:22 PM

    @GarykPatton
    Hi!Thank you for your comment,I’ll post more about this issue when I have found.

Subscriber selector

Close