分类目录归档:jQuery菜单插件

jQuery可拖拽的弹性分享按钮菜单

今天我们要给大家介绍一款非常有特色的分享按钮,它和HTML5/CSS3社会化分享按钮类似,也以小图标的方式呈现。不同的是,这款分享按钮点击后可以弹性展开各个小图标,并且拖动按钮时每一个小图标也会跟随鼠标移动,效果非常酷。

jquery-elasticity-share-button

在线演示源码下载

jQuery飘带式垂直手风琴下拉菜单

记得之前我们给大家分享过一些飘带式的菜单,比如CSS3 飘带菜单 超酷3D CSS3菜单CSS3飘带状多级下拉菜单;也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉菜单,恰好是两者的结合,效果非常不错。

jquery-ribbon-accordion-menu

下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。

HTML代码

由于使用了bootstrap框架,因此其HTML结构也需要一致,代码如下:

<div class="container">
	<div class="row">
		<div class="col-md-offset-3 col-md-6">
			<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="panel panel-default">
					<div class="panel-heading" ro[......]

阅读全文>>

jQuery/CSS3实现弹性动画展开菜单

这是一款基于jQuery和CSS3的动画菜单插件,这款菜单的特点是点击按钮时可以展开菜单,展开的时候带有弹性的动画特效,效果相当酷。菜单项是一些小图标,当然你也可以使用图标结合文字的方式,由于隐藏/展开的方式相对节省空间,因此这款菜单可以应用在移动设备上。

jquery-css3-elasticity-menu

下面我们一起来看看实现这款菜单的实现细节,或许对你学习前端,特别是学习jQuery有一定帮助。

HTML代码

菜单的HTML代码非常简单,用一个div模拟了初始的按钮,ul列表列出了所有菜单项图标,代码如下:

<div id="toolbar">
	<div class="button"></div>
	<ul class="icons">
		<li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
		<li><i class="fa fa-user fa-2x" aria-hidden="true"></i&gt[......]

阅读全文>>

经典的jQuery垂直手风琴二级下拉菜单

最近我们刚刚为大家分享过一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,效果非常不错。今天我们要再为大家介绍另外一款经典的jQuery垂直手风琴二级下拉菜单,菜单的界面非常简洁,菜单项由文字和小图标组成,非常适合网站后台管理的侧边菜单栏。

jquery-vertical-accordion-menu

在线演示源码下载

基于jQuery和Bootstrap的垂直手风琴下拉菜单

今天我们要为大家分享一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,因为它是Bootstrap风格的,所以外观上绝对可以称得上完美。另外,菜单项在展开的时候,菜单项的内容将会以飞入的动画特效展示出来,同时菜单项的展开按钮也会出现旋转的动画。与这款菜单类似的还有CSS3响应式垂直手风琴菜单基于jQuery和Bootstrap的手风琴垂直菜单这两款。

jquery-bootstrap-accordion-drop-menu

在线演示源码下载

jQuery五彩Tab选项卡动画

前段时间刚刚为大家分享过一款jQuery圆角可自由伸缩的Tab选项卡,相当实用。今天要继续分享一款五彩的jQuery Tab选项卡动画插件,它与其他的Tab选项卡不同的是,不仅有多种风格可自由选择切换,而且切换每一个Tab页的时候Tab页内容的背景就会不同,非常炫酷。

jquery-tab-colorful

在线演示源码下载

红色主题的jQuery电子商务二级下拉菜单

对于jQuery二级下拉菜单,我们之前已经分享过很多款了,比如这款jQuery二级下拉菜单 菜单简易实用CSS3多级下拉菜单 弹性展开下拉动画,大部分都是比较实用。今天要再为大家奉上一个非常实用的jQuery红色主题的二级下拉菜单,它非常实用在电子商务网站上使用。

jquery-rad-dropdown-menu

在线演示源码下载

漂亮的jQuery黑色宽屏下拉导航菜单

这是一款基于jQuery的宽屏下拉菜单,菜单整体的外观呈灰黑色,显得非常冷酷和大气。下拉菜单的宽度与主菜单齐平,因此是属于宽屏的菜单,这和我们之前分享的jQuery宽屏下拉菜单导航比较类似。这款下拉菜单的另外一个特点是,子菜单允许使用图片,因此内容相对比较丰富。

jquery-black-dropdown-menu

在线演示源码下载

jQuery垂直经典Tab内容切换插件 SVG绘制小图标

之前也有介绍过很多Tab内容切换插件,有水平切换的,也有垂直切换的,比如CSS3/jQuery实现Tab菜单小工具jQuery右侧Tab选项卡的焦点图插件,都是非常实用的。这次要分享的也是一款基于jQuery的Tab插件,它是垂直切换内容的,特点是利用svg绘制小图标放置在tab按钮上,让整个Tab切换插件在外观上漂亮了不少。

jquery-tab-svg-icon

在线演示源码下载

jQuery圆角可自由伸缩的Tab选项卡

今天我们要分享一款很不错的jQuery Tab选项卡插件,这款选项卡插件的特点是Tab标签页两端是圆角的,看上去没有那么生硬。同时Tab页的内容是可以自由伸缩的,可以适应不同页面大小和文字内容的长短。另外我们也推荐大家使用之前介绍的一款HTML5 SVG Tab滑块菜单,也非常不错。

jquery-fillet-tab-content

在线演示源码下载