jQuery滑动导航插件sliding滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑动导航插件sliding滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>jQuery滑动导航插件sliding</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/jquery-sliding-menu.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-sliding-menu.js"></script>
		<script type="text/javascript">
			$(document).ready(function()
			{
				$('#menu').menu();
			});

		</script>
	</head>

	<body>
		<section>
			<h2>Demo</h2>
			<div id="menu">
				<ul>
					<li>
						<a href="#">Artists</a>
						<ul>
							<li>
								<a href="#">Aerosmith</a>
								<ul>
									<li>
										<a href="#">Get Your Wings</a>
										<ul>
											<li>
												<a href="#">Train Kept A-Rollin'</a>
											</li>
											<li>
												<a href="#">Same Old Song and Dance</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Eagles</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
										<ul>
											<li>
												<a href="#">Hotel California</a>
											</li>
											<li>
												<a href="#">Pretty Maids All in a Row</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Led Zeppelin</a>
								<ul>
									<li>
										<a href="#">Physical Graffiti</a>
										<ul>
											<li>
												<a href="#">In My Time of Dying</a>
											</li>
											<li>
												<a href="#">Houses of the Holy</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Albums</a>
						<ul>
							<li>
								<a href="#">Get Your Wings</a>
								<ul>
									<li>
										<a href="#">Train Kept A-Rollin'</a>
									</li>
									<li>
										<a href="#">Same Old Song and Dance</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Hotel California</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
									</li>
									<li>
										<a href="#">Pretty Maids All in a Row</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Physical Graffiti</a>
								<ul>
									<li>
										<a href="#">In My Time of Dying</a>
									</li>
									<li>
										<a href="#">Houses of the Holy</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Songs</a>
						<ul>
							<li>
								<a href="#">In My Time of Dying</a>
							</li>
							<li>
								<a href="#">Houses of the Holy</a>
							</li>
							<li>
								<a href="#">Hotel California</a>
							</li>
							<li>
								<a href="#">Pretty Maids All in a Row</a>
							</li>
							<li>
								<a href="#">Train Kept A-Rollin'</a>
							</li>
							<li>
								<a href="#">Same Old Song and Dance</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Genres</a>
						<ul>
							<li>
								<a href="#">Rock</a>
								<ul>
									<li>
										<a href="#">Hotel California</a>
									</li>
									<li>
										<a href="#">Pretty Maids All in a Row</a>
									</li>
									<li>
										<a href="#">Train Kept A-Rollin'</a>
									</li>
									<li>
										<a href="#">Same Old Song and Dance</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Hard rock</a>
								<ul>
									<li>
										<a href="#">In My Time of Dying</a>
									</li>
									<li>
										<a href="#">Houses of the Holy</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Settings</a>
						<ul>
							<li>
								<a href="#">Profile</a>
							</li>
							<li>
								<a href="#">Player</a>
								<ul>
									<li>
										<a href="#">Volume</a>
									</li>
									<li>
										<a href="#">Equalizer</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</section>
</body>
</html>

JS代码(jquery-sliding-menu.js):

/* * *jQuery Sliding Menu Plugin *Mobile app list-style navigation in the browser * *Written by Ali Zahid *http://designplox.com/jquery-sliding-menu * */
(function($){
	var usedIds = [];
	$.fn.menu = function(options){
	var selector = this.selector;
	var settings = $.extend({
	dataJSON:false,backLabel:'Back'}
,options);
	return this.each(function(){
	var self = this,menu = $(self),data;
	if (menu.hasClass('sliding-menu')){
	return;
}
var menuWidth = menu.width();
	if (settings.dataJSON){
	data = processJSON(settings.dataJSON);
}
else{
	data = process(menu);
}
menu.empty().addClass('sliding-menu');
	var rootPanel;
	if (settings.dataJSON){
	$(data).each(function(index,item){
	var panel = $('<ul></ul>');
	if (item.root){
	rootPanel = '#' + item.id;
}
panel.attr('id',item.id);
	panel.addClass('menu-panel');
	panel.width(menuWidth);
	$(item.children).each(function(index,item){
	var link = $('<a></a>');
	link.attr('class',item.styleClass);
	link.attr('href',item.href);
	link.text(item.label);
	var li = $('<li></li>');
	li.append(link);
	panel.append(li);
}
);
	menu.append(panel);
}
);
}
else{
	$(data).each(function(index,item){
	var panel = $(item);
	if (panel.hasClass('menu-panel-root')){
	rootPanel = '#' + panel.attr('id');
}
panel.width(menuWidth);
	menu.append(item);
}
);
}
rootPanel = $(rootPanel);
	rootPanel.addClass('menu-panel-root');
	var currentPanel = rootPanel;
	menu.height(rootPanel.height());
	var wrapper = $('<div></div>').addClass('sliding-menu-wrapper').width(data.length * menuWidth);
	menu.wrapInner(wrapper);
	wrapper = $('.sliding-menu-wrapper',menu);
	$('a',self).on('click',function(e){
	var href = $(this).attr('href'),label = $(this).text();
	if (href == '#'){
	e.preventDefault();
}
else if (href.indexOf('#menu-panel') == 0){
	var target = $(href),isBack = $(this).hasClass('back'),marginLeft = parseInt(wrapper.css('margin-left'));
	if (isBack){
	if (href == '#menu-panel-back'){
	target = currentPanel.prev();
}
wrapper.animate({
	marginLeft:marginLeft + menuWidth}
,'fast');
}
else{
	target.insertAfter(currentPanel);
	if (settings.backLabel === true){
	$('.back',target).text(label);
}
else{
	$('.back',target).text(settings.backLabel);
}
wrapper.animate({
	marginLeft:marginLeft - menuWidth}
,'fast');
}
currentPanel = target;
	menu.animate({
	height:target.height()}
,'fast');
	e.preventDefault();
}
}
);
	return this;
}
);
	function process(data){
	var ul = $('ul',data),panels = [];
	$(ul).each(function(index,item){
	var panel = $(item),handler = panel.prev(),id = getNewId();
	if (handler.length == 1){
	handler.addClass('nav').attr('href','#menu-panel-' + id);
}
panel.attr('id','menu-panel-' + id);
	if (index == 0){
	panel.addClass('menu-panel-root');
}
else{
	panel.addClass('menu-panel');
	var li = $('<li></li>'),back = $('<a></a>').addClass('back').attr('href','#menu-panel-back');
	panel.prepend(back);
}
panels.push(item);
}
);
	return panels;
}
function processJSON(data,parent){
	var root ={
	id:'menu-panel-' + getNewId(),children:[],root:(parent ? false:true)}
,panels = [];
	if (parent){
	root.children.push({
	styleClass:'back',href:'#' + parent.id}
);
}
$(data).each(function(index,item){
	root.children.push(item);
	if (item.children){
	var panel = processJSON(item.children,root);
	item.href = '#' + panel[0].id;
	item.styleClass = 'nav';
	panels = panels.concat(panel);
}
}
);
	return [root].concat(panels);
}
function getNewId(){
	var id;
	do{
	id = Math.random().toString(36).substring(3,8);
}
while (usedIds.indexOf(id) >= 0);
	usedIds.push(id);
	return id;
}
}
;
}
(jQuery));

CSS代码(style.css):

/* style */
*,*:before,*:after{border-radius:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;outline:none;padding:0;}
body{background:#FFF;color:#2C3E50;cursor:default;font:300 1.4em/1 'Helvetica Neue',Arial,sans-serif;}
a{color:#16A085;text-decoration:none;-webkit-transition:all 300ms ease;-moz-transition:all 300ms ease;-o-transition:all 300ms ease;transition:all 300ms ease;}
a:hover{color:#1ABC9C;}
h1{font-weight:300;}
h2{font-weight:300;margin:3em 0 1em 0;}
p{margin:2em 0;}
pre{background:#34495E;color:#ECF0F1;line-height:1.4;padding:2em;tab-size:4;}
table{border-collapse:collapse;border-spacing:0;width:100%;}
th,td{font-weight:300;line-height:1;padding:1em;text-align:left;vertical-align:middle;}
tbody th{font-family:'Consolas',monospace;}
tbody tr:nth-child(2n+1){background:#ECF0F1;}
header,section,footer{margin:5em auto;max-width:90%;width:40em;}
#social{margin:1rem auto;overflow:hidden;}
#github,#tweet{float:left;}
footer{background:#7F8C8D;color:#BDC3C7;font-size:1rem;margin:0;max-width:100%;padding:2em;text-align:center;width:100%;}
footer a{color:#ECF0F1;}
/* menu */
#menu{background:#7F8C8D;}
#menu a{color:#FFF;}
/* responsive */
@media (max-width:64rem){body{font-size:1em;}
h2{margin-top:2em;}
}

附件:下载该文件资源,减少时间成本(增值服务)