jQuery作为一款主流的JavaScript前端开发框架，深受广告开发者的亲睐，同时jQuery有着不计其数的插件，特别是菜单插件更为丰富，本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单，这些侧边栏菜单可以用在不同风格的网页上，如果你觉得不错，也可以进入其下载页面下载菜单源代码。

1、jQuery 3D 垂直多级菜单 可筛选菜单项

这是一款手风琴样式的垂直多级菜单，其特点是利用CSS3特性让菜单外观显得3D立体的效果，同时你也可以在搜索框中输入关键字来筛选菜单项。

在线演示

源码下载

2、CSS3手机端侧滑菜单 4种滑动菜单特效

这是一款基于CSS3的手机端侧滑菜单，一共有4种侧滑动画特效。这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项，该动画方式由CSS3中的transition-delay属性来完成，具体效果大家可以看演示。

在线演示1

在线演示2

在线演示3

在线演示4

源码下载

3、纯CSS3垂直菜单 菜单项滑动动画

这款CSS3菜单的特点是菜单项有一个非常特别的背景，并且背景可随着鼠标滑过而滑动，挺有创意的滑动动画。这款CSS3菜单是垂直样式的，很适合做网页的侧边栏菜单。

在线演示

源码下载

4、jQuery左侧带小图标的多级下拉菜单

今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单，菜单是垂直的，每一个菜单项带有一个小图标，看起来非常专业。并且菜单支持无限极下拉，所以对各位Web开发者来说非常实用。菜单时基于jQuery的，所以基本可以支持所有的浏览器。

在线演示

源码下载

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

这是一款效果非常不错的CSS3垂直下拉菜单，菜单左侧是每一个菜单项的功能小图标，右侧也可以定义一些数字小图标，并且在菜单项最右侧是tooltip的样式。另外，当鼠标滑过菜单项时将会改变菜单的背景颜色，其中的圆角效果由简单的CSS3属性完成。

在线演示

源码下载

6、jQuery多层级垂直手风琴菜单

这款手风琴菜单是多层级的，你可以通过HTML结构生成任意层级的菜单。由于是基于jQuery的，因此这款手风琴菜单的兼容性还不错。

在线演示

源码下载

7、CSS3垂直图标菜单 带Tooltip提示框

今天我们要来分享一款CSS3菜单，菜单外观很漂亮，是垂直排列的小图标，鼠标滑过菜单项时，菜单项的背景会填充渐变的颜色，另外还会弹出该菜单项描述的Tooltip提示框。之前我们也分享过很多CSS3垂直菜单，像这款CSS3二级下拉动画菜单 菜单背景滑动动画、纯CSS3垂直动画菜单等都是非常不错的CSS3垂直菜单按钮。

在线演示

源码下载

8、CSS3手风琴下拉菜单 支持多菜单展开

这又是款基于CSS3的下拉菜单，这款CSS3菜单是手风琴样式的，今天的这款CSS3手风琴菜单也类似，菜单具有3种模式，一种是同时展开多个菜单，一种是只能同时展开一个菜单，还有一种是可以默认展开一个菜单。应该说，这款CSS3手风琴菜单非常的实用。

在线演示

源码下载

9、HTML5/CSS3仿Google Play垂直菜单

这款CSS3菜单也是垂直菜单，是一款仿Google Play的垂直菜单，另外菜单左侧还有非常漂亮的小图标。

在线演示

源码下载

10、CSS3手风琴菜单 可同时折叠多个菜单

这次分享的CSS3手风琴菜单可以同时折叠展开多个菜单项，菜单整体是黑色的风格，并且在每一个菜单项上都有很漂亮的小图标，小图标像是嵌入在里面一样很有质感。

在线演示

源码下载

11、CSS3垂直手风琴折叠菜单

这款CSS3垂直手风琴折叠菜单也非常不错，这款CSS3手风琴菜单的每一个菜单项都有小图标，而且只能有一项展开，更有意思的是，在菜单折叠和展开式右侧的箭头也会有不错的动画效果。

在线演示

源码下载

12、纯CSS3垂直动画菜单 效果很酷

今天我们来分享一款CSS3垂直菜单，这款垂直菜单不仅有漂亮的小图标，而且鼠标滑过时还有非常酷的CSS3动画，大家可以试试这款CSS3垂直菜单。

在线演示

源码下载

13、CSS3二级下拉动画菜单 菜单背景滑动动画

这款CSS3菜单的特点是在菜单展开时，菜单的背景会出现滑动的动画效果。

在线演示

源码下载

14、jQuery/CSS3带未读提醒的垂直菜单

这是一款基于jQuery和CSS3的垂直动画菜单，这款jQuery菜单的特点是菜单整体悬浮在一张大气的背景图片上，很有立体的视觉效果。其次这款菜单带有信箱未读提醒，并且不断地闪烁来提示用户打开邮件箱check邮件。

在线演示

源码下载

15、jQuery/CSS3可折叠侧边栏菜单

这次我们要分享的一款很棒的jQuery菜单插件，这款菜单插件是可折叠的侧边栏菜单，菜单的特点是点击按钮可以展开和折叠菜单，并伴随动画效果。而且每一个菜单项都有一个小图标，非常清新漂亮。当然折叠的效果需要CSS3的支持。

在线演示

源码下载

16、jQuery仿Google Nexus菜单样式插件

这是一款基于jQuery和CSS3的多功能菜单，菜单样式是仿Google Nexus的，菜单整体看上去是一个封闭的结构，也就是说既有水平菜单，也有垂直菜单，而且每一个菜单项的左侧都有一个漂亮的小图标，是一款外观非常不错的jQuery菜单导航。

在线演示

源码下载

17、清新小图标的HTML5/CSS3侧边栏菜单

这款CSS3侧边栏菜单和之前这款菜单类似，也带有漂亮可爱的小图标，鼠标滑过菜单项时背景会出现淡入淡出的效果。

在线演示

源码下载

18、CSS3垂直菜单 菜单有立体动画视觉

这款基于CSS3的垂直菜单实现很简单，该CSS3垂直菜单有几个特点：

  1. 菜单外观呈立体视觉效果，非常有质感
  2. 鼠标滑过菜单项时，菜单项会出现伸缩动画。

在线演示

源码下载

19、CSS3手风琴菜单 下拉展开带弹性动画

这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角也会出现动画，非常酷。

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/2243.html

19款绚丽实用的jQuery/CSS3侧边栏菜单的更多相关文章

  1. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  2. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  3. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  4. [转]8款实用的jQuery/CSS3最新插件应用

    今天给大家分享8款非常酷的最新jQuery/CSS3应用插件,废话少说,下面一起来看看这些插件吧. 1.HTML5重力感应积木游戏 这也是一款基于HTML5技术的重力感应游戏,一些积木从天而降,你可以 ...

  5. 【转】25个非常实用的jQuery/CSS3应用组件

    今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...

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

    今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...

  7. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

  8. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

  9. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

随机推荐

  1. js的加载方式

    同步加载即<script>标签 异步加载即 动态插入<script>标签,动态修改<script>的src属性. Ajax加载.

  2. 如何在 iOS 8 中使用 Swift 实现本地通知（下）

    在上集中,我们已经构建了一个简单的待办列表应用(to-do list app),这个应用可以在待办项过期时通过本地通知提醒用户.现在,我们要在之前的基础上添加以下功能:应用图标角标上显示过期待办项的数 ...

  3. python 列表函数(转)

    list函数: 功能:将字符创转化为列表,例: 列表基本函数: 1.元素赋值,例: 注意:通过list[0]= 'hel',如果原来位置上有值,会覆盖掉原来的. 2.分片操作 1)显示序列,例: 注意 ...

  4. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  5. Android实现XML解析技术

    转载:Android实现XML解析技术 本文介绍在Android平台中实现对XML的三种解析方式. XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为 ...

  6. php namespace use 命名空间

    也可以参考PHP官网说明:http://php.net/manual/en/language.namespaces.importing.php namespace(以下简称ns).在定义了一个ns之后 ...

  7. CentOS安装某个命令的办法如locate

    在Linux使用命令时,有时候因为系统精简的原因,某些命令可能没有安装locate包,例如你要输入的命令是locate 发现没有该命令,修复办法如下: 一.使用如下命令查询缺失命令的包名 #yum l ...

  8. 源码-hadoop1.1.0-core-org.apache.hadoop

    按包的顺序类的顺序来吧,因为我不懂hadoop类的具体体系和类之间的联系,如果有一定知识积累的可以看下别人写的hadoop源码解读类的书,类似的有 http://pan.baidu.com/s/1i3 ...

  9. WPF 之 WPF应用程序事件

    当新建一个wpf应用程序,会自动生成一个App.xaml和MainWindow.xaml文件. 其中 App.xam 用来设置Application,应用程序的起始文件和资源及应用程序的一些属性和事件 ...

  10. cocos2dx3.0-执行cocos compile -p win32 命令出现错误 MSB8020 以及编译出来的exe 无法打开的问题

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 当博主准备把cocos工程用cocos命令行编译出来的时候,报出了MSB8020的错误,具体如下 ...