QQWorld sliderNav ^{Beta v1.0.4}

一时心血来潮山寨别人的滑动背景菜单样式，不支持IE6。

使用方法 ^{步骤一：加载外部JS}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="jquery.QQWorld_NavSlideBg.js"></script>

---

DEMO 1 ^{步骤二(html)}

按照以下格式编写导航的CSS代码，并且设置li标签的样式为左浮动，例如

.menu_block {
	background: #000;
	height: 30px;
	display: block;
}
.menu {
	list-style: none;
	clear: both;
	display: block;
}
.menu li {
	float: left;
	line-height: 30px;
	height: 30px;
	padding: 0 15px;
}
.menu .current-menu a, .menu .current-item a {
	color: #fff;
	font-weight: bold;
}

<nav class="menu_block">
	<ul id="nav" class="menu">
		<li class="current-menu menu-item"><a href="#">首页</a></li>
		<li class="menu-item"><a href="#">我的主页</a></li>
		<li class="menu-item"><a href="#">阿Q的圈子</a></li>
		<li class="menu-item"><a href="#">阿Q的家园</a></li>
		<li class="menu-item"><a href="#">阿Q的项目</a></li>
		<li class="menu-item"><a href="#">阿Q的医院</a></li>
		<li class="menu-item"><a href="#">这是测试用长标题</a></li>
	</ul>
</nav>

DEMO 1 ^{步骤三(启动插件，将导航对象实例化)}

菜单背景颜色默认为'blue'，如果要设置为'red'，需要用到bgCSS参数，也可以使用图片，如 'url(images/pic.png)'

$('#nav').QQWorldNavSlideBg({
	currentNavIndex: 0,
	speed: 500,
	bgCSS: 'red'
})

预览 ^Preview~

---

DEMO 2 ^{步骤二(html)}

<nav class="menu_block">
	<ul id="nav2" class="menu">
		<li class="menu-item"><a href="#">首页</a></li>
		<li class="menu-item"><a href="#">阿Q的家园</a></li>
		<li class="menu-item"><a href="#">阿Q的项目</a></li>
		<li class="current-item menu-item"><a href="#">阿Q的医院</a></li>
		<li class="menu-item"><a href="#">这是测试用长标题</a></li>
		<li class="menu-item"><a href="#">我的主页</a></li>
		<li class="menu-item"><a href="#">阿Q的圈子</a></li>
	</ul>
</nav>

DEMO 2 ^{步骤三(启动插件，将导航对象实例化)}

默认当前项目的class是'current-menu'，如果要设置为'current-item'，需要用到currentItem参数：

$('#nav2').QQWorldNavSlideBg({
	currentItem: ['.current-item-2', '.current-item'],
	easing: 'easeOutBounce'
})

预览 ^Preview~

---

DEMO 3 ^{步骤二(html)}

<nav id="verticalMenu" class="menu_block">
	<ul id="nav3" class="menu">
		<li class="current-menu menu-item"><a href="#">首页</a></li>
		<li class="menu-item"><a href="#">我的主页</a></li>
		<li class="menu-item"><a href="#">阿Q的圈子</a></li>
		<li class="menu-item"><a href="#">阿Q的家园</a></li>
		<li class="menu-item"><a href="#">阿Q的项目</a></li>
		<li class="menu-item"><a href="#">阿Q的医院</a></li>
		<li class="menu-item"><a href="#">这是测试用长标题</a></li>
	</ul>
</nav>

按照以下格式编写导航的CSS代码，并且设置li标签的样式为左浮动，例如

.menu_block {
	background: #000;
	height: 30px;
	display: block;
}
#verticalMenu {
	height: auto;
}
.menu2 {
	list-style: none;
	clear: both;
	display: block;
}
.menu2 li {
	line-height: 30px;
	height: 30px;
	padding: 0 15px;
}
.menu2 .current-menu a, .menu .current-item a {
	color: #fff;
	font-weight: bold;
}

DEMO 3 ^{步骤三(启动插件，将导航对象实例化)}

菜单模式是垂直(vertical)，例如

$('#nav3').QQWorldNavSlideBg({
	mode: 'vertical',
	currentNavIndex: 0,
	speed: 500,
	bgCSS: 'green'
	easing: 'easeOutBounce'
})

预览 ^Preview~

---

[下载最新版 Download the latest version]