vmcMenu 导航菜单插件

vmcMenu 是一款轻量级 JQuery 导航菜单插件,可实现带过程动画的二级下拉菜单,适用于网站主导航。

特点
FEATURE

  • 支持动画效果二级下拉菜单
  • 自动读取CSS设置的外观尺寸
  • 下拉菜单宽度根据内容文本宽度自适应
  • 保持二级下拉菜单宽度不小于当前一级菜单宽度
  • 下拉菜单右侧位置不超出主菜单右侧边界
  • 经过多种浏览器,包括IE6,测试均能很好兼容

演示
DEMO

下载
DOWNLOAD

使用
USAGE

<!-- 引入JQuery和动画效果插件-->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<!-- 引入vmcMenu插件脚本及样式文件 -->
<script type="text/javascript" src="vmc.menu.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/style.css" />

<!-- Javascript -->
<script type="text/javascript">
	/* 配置选项 */
	var options = {
		duration: 400, // 下拉菜单动画时长
		easing: 'easeOutBack', // 动画效果
		currentBar: true // 是否使用顶部滑块
	};
	/* 创建菜单 */
	$('#vui-menu').vmcMenu(options);
</script>

<!-- HTML -->
<div class="vui-menu">
	<dl class="vui-main">
		<dd class="vui-item">
			<a href="#" class="vui-item-value">
				<span class="vui-item-value-icon"></span>
				<span class="vui-item-value-text">菜单一</span>
			</a>
			<ul class="vui-children">
				<li class="vui-child-item">
					<a href="#" class="vui-child-value">
						<span class="vui-child-value-icon"></span>
						<span class="vui-child-value-text">子菜单一</span>
					</a>
				</li>
				<!-- 更多二级菜单 -->
			</ul>
		</dd>
		<!-- 更多一级菜单 -->
	</dl>
</div>

选项
OPTIONS

duration

类型:int,默认值:400,单位:毫秒

下拉菜单动画时长。

easing

类型:string,默认值:"easeOutBack"

动画效果,参见jQuery Easing Plugin说明。

currentBar

类型:boolean,默认值:true

是否使用顶部滑块。