1.来自Webmaster-toolkit的CSS菜单生成器。有3种菜单风格可以选择,可以设置菜单文本的颜色,悬浮颜色,背景颜色和背景悬浮颜色,文本字体和大小以及文本的名字和链接等。
2. CSS Menus Maker - 提供20多种非常精致和漂亮的CSS菜单效果供你选择,包括CSS横向菜单,CSS垂直菜单和CSS下拉菜单。你只需要选择一下菜单,然后输入菜单的 Tab数目以及相关的文本和链接即可生成HTML,CSS和图片,下载即可,同时,你可以下载网站提供的CSS菜单生成软件,里面包含更加丰富的CSS菜 单效果,并且完全免费。
3. CSS导航菜单生成软件
这是一个需要下载的CSS导航生成软件,它的特点是所见即所得的菜单生成,含有字体,颜色,宽度,高度等多项设置。
包含多种CSS菜单效果,所见即所得的菜单编辑生成。Windows资源管理器式的操作面板,非常方便的生成各种炫酷的CSS菜单。
在线生成非常有质感和Web2.0风格的Tab选项卡菜单。
一个非常不错的纯CSS菜单生成器。
7. Likno AllWebMenus™:强大的导航菜单生成软件
8.css builder 在线的CSS风格创建工具,设置选项比较丰富。
9. navbar gengerator 在线的导航工具栏生成工具。
- IzzyMenu: 在线创建DHTML/CSS菜单
- 9款CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件
- 50多套CSS导航菜单免费资源
- ADxMenu:基于Javascript和CSS的下拉菜单
- Flickr的横向下拉菜单效果实现教程
- Likno AllWebMenus™:强大的导航菜单生成软件
- 创建Wordpress主题的悬浮菜单
- 60多个网页导航菜单设计实例欣赏
横向和纵向的下拉菜单
1) Drop Down Tabs (5 styles)- Drop Down Tabs是一个横向的CSS 选项卡菜单, 每个选项卡都支持二级下拉菜单.
2) Professional Dropdown
3) Multi-level effect menu- 这是一个高度可配置的 javascript/css下拉菜单, 可以让你轻松生成多级层联的横向或纵向下拉菜单.
30多个CSS和JS下拉菜单资源/帕兰映像
4) FastFind Menu- 一个基于 jQuery的菜单, AJAX的响应效果, 这个菜单可以 进行拖拽操作.
5) jQuery SuckerFish
6) Fancy Sliding Tab Menu using script.aculo.us
7) List Based Menu with Images- 使用<UL><LI>元素生成的菜单, 它使用简单, 并且结构非常有利于搜索引擎
30多个CSS和JS下拉菜单资源/帕兰映像
8 ) Slide down menu- 一个基于<UL><LI>
列表元素的滑动菜单.
9) Dropdownmenu made with scriptaculous/prototype- 一个多级层联的下拉菜单.
10) Suckerfish-style menu plugin for jQuery-一个效果不错的二级横各菜单.
11) Building a dynamic drop down menu
12) onMenuOpen onMenuCollapse Events
13) Mootools menu with accordion and effects- 这是一个简单的下拉菜单, 当鼠标悬浮的时候产生手风琴的弹出效果.
14) Mootools Unlimited Drop Menu
15) Creating an Outlook Navigation Bar- 使用列表生成的Outlook风格的导航菜单.
16) Simple CSS vertical menu Digg-like- 这个教程向你展示如何创建一个Digg风格的下拉菜单, 通过JS和CSS实现, 并且点击实现展示和隐藏.
17) Drop down menu with Prototype 基于Prototype框架的下拉菜单
18) Drop down menu with nested submenus- 使用CSS 和少许的 JavaScript
19) Drop down menu with jquery- 一个下拉动画菜单, 使用 jquery框架
20) jdMenu Hierarchical Menu- The jdMenu plugin基于jQuery框架, 为你提供一个简洁的方法生成漂亮的二级导航菜单.
21) jQuery plugin: Treeview-这是一个轻量级和灵活的多级树形下拉菜单, 类似于Windows的资源管理器.
22) Drop Down menu
23) Accessible fold-out menu
24) Accordion Menu script-这是一个教程示例 ,将你如何创建一个手风琴效果的二级下拉菜单.
25) Complex Dynamic Lists- 使用无序列表, 创建一个比较复杂的多级层联菜单.
26) Chrome CSS Drop Down Menu- Chrome Menu是一个CSS 和 JavaScript 结合的下拉菜单, 它的使用非常简单, 且对搜索引擎友好.
下拉菜单教程
CSS Express Drop-Down Menus- CSS Express menus可以给每个横各菜单元素添加一个纵向的下拉菜单.
Son of Suckerfish Dropdowns- 一个易于使用,超轻量级的下拉菜单, (仅仅需要12 行 JavaScript代码), 可以生成多级层联的下拉菜单, 且兼容各大主流浏览器
30多个CSS和JS下拉菜单资源/帕兰映像
下拉菜单生成器
Izzymenu- Ajax界面操作, 让你可以轻松生成自己的CSS下拉DHTML菜单,然后通过一行代码引用即可
在过去几年中,Web开发人员开发了许多Ajax和CSS,Tab选项卡切换为基础的界面,成为一项非常有趣的技术,它让我们用一种简单的方式获得信息,而不需要打开和关闭多个窗口。
在本文中,我们花了许多时间来为你寻找最好的以Tab选项卡切换为基础的界面应用,这些Tab选项卡切换应用包括使用纯CSS和以AJAX结合CSS实现的。
自动切换的Tab选项卡切换效果
1) Easy Tabs 1.2 with autochange- 你可以设置成自动切换模式的Tab选项卡菜单
2) Rotating jQuery tabs这个自动切换的Tab选项卡菜单效果非常酷,在切换的时候文字可以产生淡入淡出效果。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t6.gif)
3) Slideshow Tab Content Script-”- 这个TAB选项卡菜单支持幻灯片的自动播放模式。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t5.gif)
滑动门TAB选项卡菜单
4) Sliding Tabs- Sliding Tabs是一个mootools插件,它拥有一个非常漂亮的滑动效果。界面设计基本是模仿iTunes音乐商店和Panic的风格。
5) Coda-Slider-一个神奇的 jQuery Coda,界面设计简洁清新,滑动平稳。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t12.gif)
6) Perspective tabs- 这个滑动门的前身是Sliding Tabs,使用mootools 创建,允许在有限的宽度里面拥有更多的Tab选项卡,也就是说,顶部的Tab是可以滚动的。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t13.gif)
Ajax 的Tab选项卡内容块
7) Ajax Tabs Content Script- 这个一个多功能的Ajax Tab选项卡内容块,它可以让你在一个DIV层或是原来的HTML元素里面显示一个外在文件里面的内容。
拥有关闭能力的Tab选项卡菜单
8 ) Tab Panes-这是一个XP风格的Tabs,可以让你实时载入或关闭一个Tab选项卡。
9) Closeable Tabs Module- 这个也是可以关闭,但是没有发现打开功能。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t24.gif)
绝对值得一看的一些Tab选项卡实例操作
10) Fabtabulous- 使用Prototype创建的一个简单Tab
11) JQuery TabContainer Theme-一个JQuery的Tab选项卡内容,切换的时候拥有淡出效果。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t7.gif)
12) moo.fx Tab Accordion- 使用moo.fx创建,拥有手风琴效果的Tab选项卡内容切换。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t21.gif)
13) MooTabs- MooTabs一个极小巧(3kb) 的Tabs,基于 MooTools. 主要是创建一个简单的导航 。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t8.gif)
14) TabView component- The TabView component使用的是Yahoo的UI库,旨在让开发人员创建一个TAB导航的内容浏览。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t18.gif)
15) Fancy Sliding Tab Menu- 基于script.aculo.us框架创建的一个非常酷的TAB效果。鼠标浮动在相应的Tab时,TAB成伸缩展示效果。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t9.gif)
16) Control.Tabs- 一个简单的CSS tab选项卡切换 ,利用Prototype.js
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t11.gif)
17) Zapatec Ajax Tabs- 这个DEMO使用 Zapatec AJAX 传送内容到Tab层里面动态显示。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t22.gif)
Ajax Tab选项卡切换效果 生成器
18) 15daysofjquery- jQuery Tabs 一个简单的表单让你可以轻松创建一个Tab选项卡切换效果。
高级Tab选项卡切换效果
19) Advanced Tabs 这个Tab控制完全使用javascript来演示: 自适应Tab大小, Tab 滚动, 为Tabs添加图标, 可使用Tab插件(上下文菜单)等等。
20) Floating window with tabs 这个脚本基于一个普通的CSS Tab选项卡. 使用和设置它都非常简单. 只需要放置你的HTML内容和调用一个javascript函数就能实现。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t15.gif)
21) AJAX Tabs (Rails redux) 使用Ajax来载入内容的Tab选项卡切换。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t17.gif)
22) Ajax Tabs Reloaded 利用Ajax,用户可以添加或者移除一个Tab内容块而不需要重新载入页面。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t20.gif)
23) JQuery Nested Tab
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t19.gif)
纯CSS的Tab选项卡切换
24) Cross browser tabbed pages with embeded links 不需要javascript - 只用CSS - 并且是有效的,且支持大部分主流浏览器. 当鼠标悬浮在Tab上时,显示Tab内容区。
25) CSS Tabs这是一个不需要使用任何图像或Hack的CSS Tab选项卡菜单。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t28.gif)
26) CSS-driven tabs
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t29.gif)
27) CSS-driven tabs
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t30.gif)
28) CSS Tabs- 基于 Joshua Kaufman版本设计的CSS Tab选项卡菜单
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t31.gif)
29) Hidden Tab menu 一个简单的显示和隐藏Tab内容区的选项卡菜单。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t27.gif)
30) Inverted Sliding Doors tabs- 这是一个倒置的滑动门Tab选项卡切换,也就是说,Tab切换菜单在内容块的下面。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t32.gif)
31) Updated Simple CSS Tabs- 这个二级层联的CSS Tab选项卡切换,也就是说,在一个CSS Tab内容块里面,还可以加入一个二级CSS Tab选项卡。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t34.gif)
32) CSS Tabs with Submenus- 这个CSS TAB主要教你如何利用CSS和嵌套无序列表来实现切换效果。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t35.gif)
33) Simplified CSS Tabs
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t33.gif)
34) Tabs- 使用CSS 创建的TAB选项卡切换显示.
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t36.gif)
Ajax Tab选项卡切换效果 教程
35) Dynamic Ajax Tabs in 20 Lines 动态的Ajax Tab选项卡切换,只需要使用17行代码,当然,要基于Prototype Javascript 框架。
36) Building Tabbed Content 这个教程告诉你,如何AJAX实时载入内容的Tab选项卡。当用点击一个Tab时,将与服务器连接并传回相应的数据。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t25.gif)
37) CSS Tabs- 一个强大的教你创何使用CSS来创建Tab选项卡 。
![](http://parandroid.com/images/web-design/37-ajax-tab-based-interfaces/t37.gif)
当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣。今天我们已经收集了20多个功能超大且看上去挺漂亮的Ajax/CSS表格设计,并且教你一些表格设计中所运用的技巧,例如表格数据的排序和过滤等。
OK,让我们来看一下这些表格:
1. Tablecloth
Tablecloth 由CSS Globe 开发,是一个轻巧易于使用的表格,简洁的将表格样式添加到你的HTML 表格元素中。
2. Ask the CSS Guy Table
Ask the CSS Guy Table教给我们要如何去创建能够清晰显出去资料之间的相关联系的表格,例如:点击一个表格元素时,将突了显示这个元素,并且在纵列和横列都显示出相关的类别关系。
#3. A CSS styled table version 2
Veerle Duoh 为我们展示了一个漂亮的表格设计,并教我们如何使用CSS来吸引用户的眼球。
#4. Sortable Table
Sortable Table 演示了如何按升序或降序排列以及如何过滤表格中的数据。
5. Row Locking with CSS and JavaScript
Css Guy再次对表格使用了聚焦高亮的效果,除非用户再次点击,否则表单数据将一直保持亮高。
他还给了我们另一个示例:another example to Lock rows with radios .
#6. Vertical scrolling tables
如果您有大量的表格数据,但却没有太大的空间来展示它,这可能是个比较好的方法:一个纯CSS的表格与固定的标题和页脚,以及滚动显示的内容。
7. Replicating a Tree table
这是一个使用HTML 和CSS 设计的树形状表格。
8 ) Paginate, sort and search a table with Ajax and Rails
这个表格提供了一个动态的界面,而不需要重新刷新整个页面。
9. Collapsible tables with DOM and CSS
此表格加上箭头形象的脚本提示,用来控制表格的伸展和收缩。
10. TableSorter plug-in for jQuery
它的主要特性包括多列排序,支持<TH>的rowspan和colspan属性以及许多其他功能。
11. Stripe your tables the OO way
使用了Javascript 为表格中的行进行颜色交替,并且添加了onmouseover 和onmouseout 事件,当鼠标点击时,切换背景颜色。
12. MooTools Table Row & Column highlighting
基于MooTools 框架,高亮显示鼠标悬停时的单元格所在的行和列。
13. CSS Table Gallery
93 styled tables是一个专门收集表格样式的站点,下面是来自一个表格样式的截图:
14. jQuery Table Filter
可以对数据进行各种不同的排序、过滤。
15. Sortable/Resizable/Editable TableKit
TableKit基于Prototype框架,专门收集各种HTML表格,可以利用Ajax实时的进行表格栏目大小、排序等编辑。
16. Make all your tables sortable
17. Zebra Tables
alistapart为我们提供了一个极好的例子,如何使用JavaScript和DOM的改变背景色风格,以突出显示单元格。
18. Standardista Table Sorting
Standardista Table Sorting 是一个Javascript模块,让您可以对HTML数据表的任何栏目进行排序。
19. GridView3 Example
20. Mootable
21. Drag & Drop Sortable Lists with JavaScript and CSS
可能还会有一些你更想寻找的详细资料,下面是一些相关的资源链接:
如果你知道其它更强大的Ajax/CSS表格,欢迎在此留言。