25个非常实用的jQuery/CSS3应用组件

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏。

10大经典CSS3菜单应用欣赏,经典css3菜单欣赏

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单、Tab菜单、面包屑菜单等。

jQuery是一款非常实用的JavaScript框架,基于jQuery开发的菜单插件也非常多,包括下拉菜单、Tab菜单等。另外,HTML5的应用,让这些菜单在视觉效果和交互能力上又提高了很多。本文就推荐了7款炫酷而实用的jQuery/HTML5菜单,希望对你有所帮助。

1、jQuery水晶样式下拉导航

1、CSS3飘带状3D菜单 菜单带小图标

这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。

图片 1

在线演示        源码下载

1、CSS3扇形动画菜单 鼠标滑过扇形展开动画

这款CSS3菜单很有个性,是一个扇形的多级下拉菜单,当你将鼠标滑过菜单时,菜单项即可展开。

图片 2

在线演示源码下载

这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含多级菜单、自定义内容菜单、表单菜单,是一款不可多得的jQuery菜单导航插件。

2、jQuery动画二级下拉菜单

对于jQuery菜单,大家已经非常熟悉了,我们也已经分享过很多jQuery菜单和CSS3菜单。今天要介绍的这款jQuery菜单是二级下拉菜单,并且在子菜单展开的时候出现动画效果。更为特别的是,鼠标滑过子菜单项时会产生该菜单项的提示。

图片 3

在线演示        源码下载

2、CSS3 3D旋转下拉菜单

这款菜单也是基于HTML5和CSS3的,尽管看上去是平面菜单,但是二级菜单下拉后会给你3D的视觉效果,并且菜单在展开时是旋转的,效果很棒。

图片 4

在线演示源码下载

图片 5

3、CSS3 iPhone样式的3D菜单

之前已经向大家分享过很多漂亮的CSS3菜单了,很多菜单都支持多级下拉。今天要分享的CSS3菜单时模拟iPhone样式的,菜单整体呈现3D立体的视觉效果。同时你也可以选择平面方式的菜单,2D和3D之间可以自由切换。

图片 6

在线演示        源码下载

3、jQuery/CSS3实现超酷的动画Tab菜单

这款菜单是基于jQuery的,同时也是一款Tab菜单,这款jQuery
Tab菜单的外观相对比较清新简易,并且在Tab切换时出现飞入飞出的动画效果。

图片 7

在线演示源码下载

在线演示    /    源码下载

4、CSS3 3D动画菜单 3D立方体菜单项

之前我们分享过很多富有创意的CSS3菜单,今天分享的这款CSS3动画菜单非常有特点,它的菜单项是一个个可以翻转的3D立方体,效果非常不错。再来回顾一下之前的3D菜单,像这款HTML5/CSS3
3D下拉折叠菜单也非常不错。

图片 8

在线演示        源码下载

4、jQuery二级下拉菜单

这款jQuery菜单的外观是红色的,看上去非常温暖,菜单的整体看上去非常简单,但是却相当实用,你可以试试。

图片 9

在线演示源码下载

2、CSS3堆栈式图片切换动画插件

5、纯CSS3立体动画菜单 菜单项按下有内阴影

这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的感觉。另外,当我们点击菜单项时,菜单项将会出现内阴影的视觉效果。

图片 10

在线演示        源码下载

5、CSS3带小图标垂直下拉菜单

这是一款垂直的手风琴样式菜单,每一个菜单项都可以定义相应的小图标,同时你也可以自定义菜单的宽度。

图片 11

在线演示源码下载

这是一款非常炫的CSS3图片切换动画效果,动画效果非常丰富,折叠式、淡入淡出式、旋转式等,让你的图片颇具特色,大大提高用户体验。

6、CSS3华丽的Tab菜单 带小图标动画

之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG
Tab滑块菜单,结合SVG,Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3的华丽Tab菜单,这款Tab菜单的菜单项是一个个小图标,鼠标滑过时,菜单项展示对应文字,并出现展开的动画。

图片 12

在线演示        源码下载

6、jQuery/CSS3带表单的下拉菜单

这款jQuery菜单的特点是菜单下拉项内容可以自定义,可以使文字、表单等。另外木质外观的样式看上去非常不错。

图片 13

在线演示源码下载

图片 14

7、基于Bootstrap的CSS3下拉菜单

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,基于Bootstrap框架,我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。

图片 15

在线演示        源码下载

7、CSS3简易清新的下拉菜单

这是一款相对比较简易的CSS3下拉菜单,简单的颜色搭配让这款菜单看上去也还不错。

图片 16

在线演示源码下载

这些jQuery/HTML5菜单插件应该都比较实用,而且形式丰富,推荐各位可以使用一下。

在线演示    /    源码下载

8、CSS3黑色主题菜单 菜单项淡入淡出动画

今天我们要来分享一款简单实用的CSS3菜单,菜单是黑色主题,因此显得非常端庄霸气。由于菜单应用了CSS3特性,菜单的边缘将出现阴影的效果,给人立体的视觉效果。另外还有一个特点就是,鼠标滑过菜单项时将出现淡入淡出的动画特效,是一款很不错的CSS3黑色主题菜单。

图片 17

在线演示        源码下载

3、基于jQuery和xCharts的动画图表

9、CSS3精美小图标菜单导航

之前我们分享过很多漂亮的小图标菜单导航,像这款超具立体感的CSS3 3D菜单
菜单项带小图标,还有这款HTML5/CSS3仿Google
Play垂直菜单,都很不错。今天我们要来分享一款更加精美清新的CSS3小图标菜单导航,鼠标滑过这款菜单时还可以在图标和文字之间形成切换的动画效果。

图片 18

在线演示        源码下载

这是一款非常不错的jQuery图表插件,基于xCharts,图表使用非常方便,支持自定义时间段查询,并且伴有动画效果。

10、CSS3响应式面包屑菜单

之前我们分享过两款CSS3面包屑菜单,纯CSS3圆形面包屑菜单和CSS3扁平化面包屑菜单导航,效果都还不错。今天我们再分享一款响应式面包屑菜单,这款CSS3菜单外观设计非常简洁但又十分大气,我们可以在分步注册页面或者活动引导页面使用这款CSS3面包屑菜单。

图片 19

在线演示        源码下载

以上就是10大经典CSS3菜单应用欣赏,欢迎收藏分享。

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验。本文将带…

图片 20

在线演示    /    源码下载

4、jQuery动画图标菜单导航插件imgbubbles

imgbubbles是一款基于jQuery的动画按钮菜单插件,鼠标滑过按钮时,按钮会有逐渐放大的特效,放大的速度可以自定义。

图片 21

在线演示    /    源码下载

5、jQuery笔记本式图片滑动插件,支持鼠标拖拽

这是一款非常有特色的jQuery图片滑动插件,它不仅有笔记本样式,而且支持鼠标拖拽。

图片 22

在线演示    /    源码下载

6、仿Google Nexus样式菜单导航

这是一款用Javascript和CSS制作的仿Google
Nexus样式的菜单导航,菜单十分清新亮丽,是一款不错的JS菜单导航

图片 23

在线演示    /    源码下载

7、带数字索引的jquery焦点图

这是一款来自易迅网的产品展示焦点图,该jQuery焦点图在右侧有竖向数字索引,鼠标滑过数字索引即可切换图片。

图片 24

在线演示    /    源码下载

8、jQuery pikaday简易日期选择插件

pikaday是一款基于jQuery的日期选择插件,插件非常简单,外观也还不错,是一款值得一试的日期选择插件。

图片 25

在线演示    /    源码下载

9、jQuery jBox弹出窗口插件

jBox是一款基于jQuery的弹出窗口插件,jBox可以实现普通提示框、确认框、iframe加载等功能,是一款非常不错的jQuery弹出窗口插件。

图片 26

在线演示    /    源码下载

10、HTML5重力感应积木游戏 

这也是一款基于HTML5技术的重力感应游戏,一些积木从天而降,你可以拖动鼠标甩动这些积木,积木在重力的作用下纷纷落下,并且互相碰撞。 

图片 27 

在线演示 / 源码下载 

11、Apple样式jQuery横向动画图标菜单 

这是一款基于jQuery的横向动画菜单,菜单的样式是仿苹果官网的菜单样式,菜单的图标动画很酷。 

图片 28 

在线演示 / 源码下载 

12、Javascript实现的WEB斯诺克台球游戏 

这是一款非常酷的JS台球游戏,效果十分流畅,唯一的缺点是没有完善的台球游戏规则和多人游戏。 

图片 29 

在线演示 / 源码下载 

13、jQuery/CSS3仿iOS股市信息滚动 

这是一款用jQuery和CSS3技术实现的仿iOS股市信息滚动效果的插件,效果很不错。 

图片 30 

在线演示 / 源码下载 

14、jQuery图文结合滚动切换效果 

这款jQuery图文切换插件比较普通,但是一款很实用的jQuery焦点图。 

图片 31 

在线演示 / 源码下载 

15、JS图片循环放大 

随着鼠标移动图片逐渐放大特效。 

图片 32 

在线演示 / 源码下载 

16、jQuery前后张图片部分截图焦点图 

这是一款全屏的jQuery焦点图插件,该焦点图的特点是前后几张图片都会有部分的截图,滑动效果非常不错。 

图片 33 

在线演示 / 源码下载 

17、jQuery带微博按钮返回顶部插件 

jQuery返回顶部按钮的插件非常多,但是这是一款专门经过定制的jQuery返回顶部按钮插件,它有一个非常不错的功能,就是可以带有分享到微博的按钮,用户可以非常方便地分享喜欢的文章。

图片 34 

在线演示 / 源码下载 

18. jQuery圆盘抽奖特效 

这又是一款jQuery圆盘抽奖插件,点击中间“点击抽奖”按钮即可开始抽奖,这款抽奖插件可以在抽奖结束后显示抽奖结果。 

图片 35 

在线演示 / 源码下载 

19. 很可爱的CSS3动画下拉菜单 

这款CSS3下拉菜单样式非常新颖,每一个菜单项有一个非常可爱的小图标,鼠标滑过小图标时即可展开二级菜单项。 

图片 36 

在线演示 / 源码下载 

20. jQuery样式切换器插件switcher 

这是一款基于jQuery的在线样式切换插件,可以切换背景颜色和背景图片,效果很出色。 

图片 37 

在线演示 / 源码下载 

21. jQuery网上商城左侧分类下拉菜单 

很多网上商城的商品种类繁多,商城会在左侧展示一个纵向下拉菜单,这款下拉菜单非常大气。 

图片 38 

在线演示 / 源码下载 

22. jQuery弹出层登录和全屏注册表单 

这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单。 

图片 39 

在线演示 / 源码下载 

23. jQuery/CSS3响应式全屏焦点图 

这是一款基于jQuery和CSS3的相应式焦点图,该焦点图是全屏展示的,切换时播放多种绚丽的动画效果。 

图片 40 

在线演示 / 源码下载 

24. jQuery多条件筛选插件代码 

这是一款基于jQuery的多条件查询插件,可以选择日期、单选框、多选框、文本框等。 

图片 41 

在线演示 / 源码下载 

25. jQuery带小图标Tab选项卡插件 

这是一款竖向Tab
jQuery插件,该Tab的插件的特点不仅可以竖向展示,而且Tab选项卡带有漂亮的小图标。 

图片 42 

在线演示 / 源码下载

1、jQuery水晶样式下拉导航
这是一款非常不错的jQuery多功能下拉菜单插件,菜单…

发表评论

电子邮件地址不会被公开。 必填项已用*标注