大地春常在,资源遍地有

来源:互联网 发布:合并两首歌用的软件 编辑:程序博客网 时间:2024/04/28 23:03

1.来自Webmaster-toolkit的CSS菜单生成器。有3种菜单风格可以选择,可以设置菜单文本的颜色,悬浮颜色,背景颜色和背景悬浮颜色,文本字体和大小以及文本的名字和链接等。

CSS菜单生成器

2. CSS Menus Maker -提供20多种非常精致和漂亮的CSS菜单效果供你选择,包括CSS横向菜单,CSS垂直菜单和CSS下拉菜单。你只需要选择一下菜单,然后输入菜单的Tab数目以及相关的文本和链接即可生成HTML,CSS和图片,下载即可,同时,你可以下载网站提供的CSS菜单生成软件,里面包含更加丰富的CSS菜单效果,并且完全免费。

CSS菜单生成器

3. CSS导航菜单生成软件

这是一个需要下载的CSS导航生成软件,它的特点是所见即所得的菜单生成,含有字体,颜色,宽度,高度等多项设置。

CSS Horizontal Menu Generator 1.0

4. 免费的CSS menu generator软件

包含多种CSS菜单效果,所见即所得的菜单编辑生成。Windows资源管理器式的操作面板,非常方便的生成各种炫酷的CSS菜单。

CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件

5. Tab Generatror

在线生成非常有质感和Web2.0风格的Tab选项卡菜单。

CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件

6.Infinite Menus

一个非常不错的纯CSS菜单生成器。

CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件

7. Likno AllWebMenus™:强大的导航菜单生成软件

8.css builder 在线的CSS风格创建工具,设置选项比较丰富。

9. navbar gengerator 在线的导航工具栏生成工具。





导航菜单是网站设计中最重要的因素之一。网络开发人员可以使用CSS创建方便用户的横向或纵向导航菜单,而JavaScript则使人们有可能创造更多的互动,更多的响应和更灵活的导航到任何网站。Noupe在这篇文章里面提出了25个以上(横向和纵向)多层次的下拉菜单,包括使用了JavaScript和CSS ,你可以将这些示例和教程用你的未来网站设计计划。帕兰照常为你翻译, 你也可以查看帕兰映像之前发表的一些关于菜单应用的文章:
  • 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- 这是一个简单的下拉菜单, 当鼠标悬浮的时候产生手风琴的弹出效果.

30多个CSS和JS下拉菜单资源/帕兰映像


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

30多个CSS和JS下拉菜单资源/帕兰映像


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

30多个CSS和JS下拉菜单资源/帕兰映像


24) Accordion Menu script-这是一个教程示例 ,将你如何创建一个手风琴效果的二级下拉菜单.


25) Complex Dynamic Lists- 使用无序列表, 创建一个比较复杂的多级层联菜单.


26) Chrome CSS Drop Down Menu- Chrome Menu是一个CSS 和 JavaScript 结合的下拉菜单, 它的使用非常简单, 且对搜索引擎友好.


下拉菜单教程

CSS Pop-Out Menu Tutorial

30多个CSS和JS下拉菜单资源/帕兰映像


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选项卡菜单效果非常酷,在切换的时候文字可以产生淡入淡出效果。
3) Slideshow Tab Content Script-”- 这个TAB选项卡菜单支持幻灯片的自动播放模式。

滑动门TAB选项卡菜单

4) Sliding Tabs- Sliding Tabs是一个mootools插件,它拥有一个非常漂亮的滑动效果。界面设计基本是模仿iTunes音乐商店和Panic的风格。


5) Coda-Slider-一个神奇的 jQuery Coda,界面设计简洁清新,滑动平稳。

6) Perspective tabs- 这个滑动门的前身是Sliding Tabs,使用mootools 创建,允许在有限的宽度里面拥有更多的Tab选项卡,也就是说,顶部的Tab是可以滚动的。

Ajax 的Tab选项卡内容块

7) Ajax Tabs Content Script- 这个一个多功能的Ajax Tab选项卡内容块,它可以让你在一个DIV层或是原来的HTML元素里面显示一个外在文件里面的内容。


拥有关闭能力的Tab选项卡菜单

8 ) Tab Panes-这是一个XP风格的Tabs,可以让你实时载入或关闭一个Tab选项卡。


9) Closeable Tabs Module- 这个也是可以关闭,但是没有发现打开功能。

绝对值得一看的一些Tab选项卡实例操作

10) Fabtabulous- 使用Prototype创建的一个简单Tab


11) JQuery TabContainer Theme-一个JQuery的Tab选项卡内容,切换的时候拥有淡出效果。

12) moo.fx Tab Accordion- 使用moo.fx创建,拥有手风琴效果的Tab选项卡内容切换。


13) MooTabs- MooTabs一个极小巧(3kb) 的Tabs,基于 MooTools. 主要是创建一个简单的导航 。


14) TabView component- The TabView component使用的是Yahoo的UI库,旨在让开发人员创建一个TAB导航的内容浏览。


15) Fancy Sliding Tab Menu- 基于script.aculo.us框架创建的一个非常酷的TAB效果。鼠标浮动在相应的Tab时,TAB成伸缩展示效果。

16) Control.Tabs- 一个简单的CSS tab选项卡切换 ,利用Prototype.js

17) Zapatec Ajax Tabs- 这个DEMO使用 Zapatec AJAX 传送内容到Tab层里面动态显示。

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函数就能实现。

21) AJAX Tabs (Rails redux) 使用Ajax来载入内容的Tab选项卡切换。


22) Ajax Tabs Reloaded 利用Ajax,用户可以添加或者移除一个Tab内容块而不需要重新载入页面。

23) JQuery Nested Tab

纯CSS的Tab选项卡切换

24) Cross browser tabbed pages with embeded links 不需要javascript - 只用CSS - 并且是有效的,且支持大部分主流浏览器. 当鼠标悬浮在Tab上时,显示Tab内容区。


25) CSS Tabs这是一个不需要使用任何图像或Hack的CSS Tab选项卡菜单。


26) CSS-driven tabs

27) CSS-driven tabs

28) CSS Tabs- 基于 Joshua Kaufman版本设计的CSS Tab选项卡菜单


29) Hidden Tab menu 一个简单的显示和隐藏Tab内容区的选项卡菜单。

30) Inverted Sliding Doors tabs- 这是一个倒置的滑动门Tab选项卡切换,也就是说,Tab切换菜单在内容块的下面。

31) Updated Simple CSS Tabs- 这个二级层联的CSS Tab选项卡切换,也就是说,在一个CSS Tab内容块里面,还可以加入一个二级CSS Tab选项卡。


32) CSS Tabs with Submenus- 这个CSS TAB主要教你如何利用CSS和嵌套无序列表来实现切换效果。

33) Simplified CSS Tabs

34) Tabs- 使用CSS 创建的TAB选项卡切换显示.


Ajax Tab选项卡切换效果 教程

35) Dynamic Ajax Tabs in 20 Lines 动态的Ajax Tab选项卡切换,只需要使用17行代码,当然,要基于Prototype Javascript 框架。


36) Building Tabbed Content 这个教程告诉你,如何AJAX实时载入内容的Tab选项卡。当用点击一个Tab时,将与服务器连接并传回相应的数据。

37) CSS Tabs- 一个强大的教你创何使用CSS来创建Tab选项卡 。






当谈到表格数据的设计时,没有太多的网页设计师会有太大的兴趣。今天我们已经收集了20多个功能超大且看上去挺漂亮的Ajax/CSS表格设计,并且教你一些表格设计中所运用的技巧,例如表格数据的排序和过滤等。

OK,让我们来看一下这些表格:

1. Tablecloth

Tablecloth 由CSS Globe 开发,是一个轻巧易于使用的表格,简洁的将表格样式添加到你的HTML 表格元素中。

21个新奇漂亮的Ajax/CSS表格设计-Tablecloth

2. Ask the CSS Guy Table

Ask the CSS Guy Table教给我们要如何去创建能够清晰显出去资料之间的相关联系的表格,例如:点击一个表格元素时,将突了显示这个元素,并且在纵列和横列都显示出相关的类别关系。

21个新奇漂亮的Ajax/CSS表格设计-Ask the CSS Guy Table

#3. A CSS styled table version 2

Veerle Duoh 为我们展示了一个漂亮的表格设计,并教我们如何使用CSS来吸引用户的眼球。

21个新奇漂亮的Ajax/CSS表格设计-A CSS styled table version 2

#4. Sortable Table

Sortable Table 演示了如何按升序或降序排列以及如何过滤表格中的数据。

21个新奇漂亮的Ajax/CSS表格设计-Sortable Table

5. Row Locking with CSS and JavaScript

Css Guy再次对表格使用了聚焦高亮的效果,除非用户再次点击,否则表单数据将一直保持亮高。

21个新奇漂亮的Ajax/CSS表格设计-Row Locking with CSS and JavaScript

他还给了我们另一个示例:another example to Lock rows with radios .

#6. Vertical scrolling tables

如果您有大量的表格数据,但却没有太大的空间来展示它,这可能是个比较好的方法:一个纯CSS的表格与固定的标题和页脚,以及滚动显示的内容。

21个新奇漂亮的Ajax/CSS表格设计-Vertical scrolling tables

7. Replicating a Tree table

这是一个使用HTML 和CSS 设计的树形状表格。

21个新奇漂亮的Ajax/CSS表格设计-Replicating a Tree table

8 ) Paginate, sort and search a table with Ajax and Rails

这个表格提供了一个动态的界面,而不需要重新刷新整个页面。

21个新奇漂亮的Ajax/CSS表格设计-ajax tables

9. Collapsible tables with DOM and CSS

此表格加上箭头形象的脚本提示,用来控制表格的伸展和收缩。

21个新奇漂亮的Ajax/CSS表格设计-Collapsible tables with DOM and CSS

10. TableSorter plug-in for jQuery

它的主要特性包括多列排序,支持<TH>的rowspan和colspan属性以及许多其他功能。

21个新奇漂亮的Ajax/CSS表格设计-TableSorter plug-in for jQuery

11. Stripe your tables the OO way

使用了Javascript 为表格中的行进行颜色交替,并且添加了onmouseoveronmouseout 事件,当鼠标点击时,切换背景颜色。

21个新奇漂亮的Ajax/CSS表格设计-Stripe your tables the OO way

12. MooTools Table Row & Column highlighting

基于MooTools 框架,高亮显示鼠标悬停时的单元格所在的行和列。

21个新奇漂亮的Ajax/CSS表格设计-MooTools Table Row & Column highlighting

13. CSS Table Gallery

93 styled tables是一个专门收集表格样式的站点,下面是来自一个表格样式的截图:

21个新奇漂亮的Ajax/CSS表格设计-CSS Table Gallery

14. jQuery Table Filter

可以对数据进行各种不同的排序、过滤。

21个新奇漂亮的Ajax/CSS表格设计-jQuery Table Filter

15. Sortable/Resizable/Editable TableKit

TableKit基于Prototype框架,专门收集各种HTML表格,可以利用Ajax实时的进行表格栏目大小、排序等编辑。

21个新奇漂亮的Ajax/CSS表格设计-sortable, resizable, editable

16. Make all your tables sortable

21个新奇漂亮的Ajax/CSS表格设计-sortable table

17. Zebra Tables

alistapart为我们提供了一个极好的例子,如何使用JavaScript和DOM的改变背景色风格,以突出显示单元格。

21个新奇漂亮的Ajax/CSS表格设计-Zebra Tables

18. Standardista Table Sorting

Standardista Table Sorting 是一个Javascript模块,让您可以对HTML数据表的任何栏目进行排序。

21个新奇漂亮的Ajax/CSS表格设计-Standardista Table Sorting

19. GridView3 Example

21个新奇漂亮的Ajax/CSS表格设计-GridView3 Example

20. Mootable

21个新奇漂亮的Ajax/CSS表格设计-Mootable

21. Drag & Drop Sortable Lists with JavaScript and CSS

21个新奇漂亮的Ajax/CSS表格设计-Drag & Drop Sortable Lists with JavaScript and CSS

可能还会有一些你更想寻找的详细资料,下面是一些相关的资源链接:

  • Bring on the Tables
  • Accessible Data Tables
  • Designing Data Tables
  • Brainjar Table Sort
  • Table Sorter

如果你知道其它更强大的Ajax/CSS表格,欢迎在此留言。