手机网站jQuery左侧导航菜单特效代码

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

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

以下是手机网站jQuery左侧导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为手机网站jQuery左侧导航菜单，属于站长常用代码" />
<title>手机网站jQuery左侧导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/reboot.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.simplesidebar.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="wrapper">

	<div class="toolbar">
		<div id="open-sb" class="menu-button menu-left"></div>
	</div>
	<section class="sidebar">
		<nav>
			<h6>Simple Left Sidebar</h6>
			<ul>
				<li><a href="#" target="_blank">Home</a></li>
				<li><a href="#" target="_blank">Demo Left Sidebar</a></li>
				<li><a href="#" target="_blank">Demo Right Sidebar</a></li>
				<li><a href="#" target="_blank">Demo AJAX</a></li>
				<li><a href="#" target="_blank">GitHub</a></li>
				<li><a href="#" target="_blank">Bower</a></li>
				<li><a href="#" target="_blank">Set-Up</a></li>
				<li><a href="#" target="_blank">Options</a></li>
			</ul>
			<hr>
			<h6>DcDev</h6>
			<ul>
				<li><a href="#.org/" target="_blank">DcDev Homepage</a></li><a href="#.org/">
				</a><li><a href="#.org/" target="_blank"></a><a href="#.org/plugins/">Other Plugins</a></li>
				<li><a href="#" target="_blank">GitHub</a></li>
			</ul>
		</nav>
	</section>
</div>
<script>
$( document ).ready(function() {
	$.ajaxSetup({
		cache: false
	});
	$( '.sidebar' ).simpleSidebar({
		settings: {
			opener: '#open-sb',
			wrapper: '.wrapper',
			animation: {
				duration: 500,
				easing: 'easeOutQuint'
			}
		},
		sidebar: {
			align: 'left',
			width: 200,
			closingLinks: 'a',
		}
	});
});
</script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(jquery.simplesidebar.js):

//Simple Sidebar v1.0.3 by DcDeiv https://github.com/dcdeiv// GPLv2 http://www.gnu.org/licenses/gpl-2.0-standalone.html(function( $ ){
	$.fn.simpleSidebar = function( options ){
	//declaring all global variablesvar sbw,align,callbackA,callbackB,//allowing user customisationdefaults ={
	settings:{
	opener:undefined,wrapper:undefined,//HTML tag is not safe. Please,use a container/wrapper divignore:undefined,data:'ssbplugin',animation:{
	duration:500,//milliseconds (0.5s = 500ms)easing:'swing'}
}
,sidebar:{
	align:undefined,width:350,//pixelsgap:64,//pixelsclosingLinks:'a',style:{
	zIndex:3000}
}
,mask:{
	style:{
	backgroundColor:'black',opacity:0.5,filter:'Alpha(opacity=50)' //IE8 and earlier}
}
}
,config = $.extend( true,defaults,options ),$sidebar = this,$opener = $( config.settings.opener ),$wrapper = $( config.settings.wrapper ),$ignore = $( config.settings.ignore ),dataName = config.settings.data,duration = config.settings.animation.duration,easing = config.settings.animation.easing,defAlign = config.sidebar.align,sbMaxW = config.sidebar.width,gap = config.sidebar.gap,$links = config.sidebar.closingLinks,defStyle = config.sidebar.style,maskDef = config.mask.style,winMaxW = sbMaxW + gap,//selecting all fixed elements except the sidebar and the ignore elements$fixedEl = $( '*' ).not( $ignore ).not( $sidebar ).filter(function(){
	return $( this ).css( 'position' ) == 'fixed';
}
),$absolEl = $( '*' ).not( $ignore ).filter(function(){
	return $( this ).css( 'position' ) == 'absolute';
}
),//selecting all elements.$elements = $fixedEl.add( $absolEl ).add( $sidebar ).add( $wrapper ).not( $ignore ),w = $( window ).width(),MaskDef ={
	position:'fixed',top:-200,right:-200,left:-200,bottom:-200,zIndex:config.sidebar.style.zIndex - 1}
,maskStyle = $.extend({
}
,maskDef,MaskDef );
	//adding default style to $sidebar$sidebar.css( defStyle )//wrapping inner content to let it overflow.wrapInner( '<div data-' + dataName + '="sub-wrapper"></div>' );
	var subWrapper = $sidebar.children().filter(function(){
	return $( this ).data( dataName ) === 'sub-wrapper';
}
);
	subWrapper.css({
	width:'100%',height:'100%',overflow:'auto'}
);
	//Appending to 'body' the mask-div and adding its style$( 'body' ).append( '<div data-' + dataName + '="mask"></div>' );
	var maskDiv = $( 'body' ).children().filter(function(){
	return $( this ).data( dataName ) === 'mask';
}
);
	maskDiv.css( maskStyle ).hide();
	//Animate $elements to the rightvar animateToRight = function(){
	var nsbw = $sidebar.width();
	$elements.each(function(){
	$( this ).animate({
	marginLeft:'+=' + nsbw,marginRight:'-=' + nsbw}
,{
	duration:duration,easing:easing,complete:callbackA}
);
}
);
}
,//animate $elements to the leftanimateToLeft = function(){
	var nsbw = $sidebar.width();
	$elements.each(function(){
	$( this ).animate({
	marginLeft:'-=' + nsbw,marginRight:'+=' + nsbw}
,{
	duration:duration,easing:easing,complete:callbackB}
);
}
);
}
,//hiding overflow [callback(A/B)]overflowTrue = function(){
	$( 'body,html' ).css({
	overflow:'hidden'}
);
	$( maskDiv ).fadeIn();
}
,//adding overflow [callback(A/B)]overflowFalse = function(){
	$( maskDiv ).fadeOut(function(){
	$( 'body,html' ).css({
	overflow:'auto'}
);
}
);
}
;
	//assigning value to sbwif ( w < winMaxW ){
	sbw = w - gap;
}
else{
	sbw = sbMaxW;
}
//testing config.sidebar.alignif( defAlign === undefined || defAlign === 'left' ){
	align = 'left';
}
else{
	align = 'right';
}
//Sidebar initial positionif ( 'left' === align ){
	$sidebar.css({
	position:'fixed',top:0,left:0,bottom:0,width:sbw,marginLeft:-sbw}
);
	callbackA = overflowTrue;
	callbackB = overflowFalse;
	$opener.click( animateToRight );
	maskDiv.click( animateToLeft );
	$sidebar.on( 'click',$links,animateToLeft );
}
else{
	$sidebar.css({
	position:'fixed',top:0,bottom:0,right:0,width:sbw,marginRight:-sbw}
);
	callbackA = overflowFalse;
	callbackB = overflowTrue;
	$opener.click( animateToLeft );
	maskDiv.click( animateToRight );
	$sidebar.on( 'click',$links,animateToRight );
}
//Adding responsive to $sidebar$( window ).resize(function(){
	var rsbw,sbMar,w = $( this ).width();
	if ( w < winMaxW ){
	rsbw = w - gap;
}
else{
	rsbw = sbMaxW;
}
$sidebar.css({
	width:rsbw}
);
	//fixing $element position according to $sidebar new width (rsbw)if ( 'left' === align ){
	sbMar = parseInt( $sidebar.css( 'margin-left' ) );
	if ( 0 > sbMar ){
	$sidebar.css({
	marginLeft:-rsbw}
);
}
else{
	$elements.not( $sidebar ).css({
	marginLeft:+ rsbw,marginRight:- rsbw}
);
}
}
else{
	sbMar = parseInt( $sidebar.css( 'margin-right' ) );
	if ( 0 > sbMar ){
	$sidebar.css({
	marginRight:-rsbw}
);
}
else{
	$elements.not( $sidebar ).css({
	marginLeft:- rsbw,marginRight:+ rsbw}
);
}
}
}
);
	return this;
}
;
}
)( jQuery );

CSS代码(main.css):

header{color:#b0120a;}
.code{-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;background-color:#e2e2e2;color:#000;font-family:'Fira mono','Courier New',Courier,monospace;font-size:85%;letter-spacing:.05em;padding:1em;}
input{margin:.5em;border:0;min-width:100px;background-color:#b0120a;color:#f8f8f8;font-family:inherit;font-size:inherit;border-bottom:5px solid #e84e40;padding:.5em 1em;-webkit-border-radius:.2em;-moz-border-radius:.2em;-webkit-box-shadow:1px 1px 1px 0px rgba(50,50,50,0.75);-moz-box-shadow:1px 1px 1px 0px rgba(50,50,50,0.75);box-shadow:1px 1px 1px 0px rgba(50,50,50,0.75);outline:none;}
input:active{box-shadow:0 0 0 0;outline:none;}
input:hover{outline:none;}
input:active,input:hover{background-color:#e84e40;border-color:#b0120a;}
main{max-width:600px;margin:0 auto;margin-top:4em;}
main a,main a:active,main a:focus,main a:hover,main a:link,main a:visited{font-family:'fira mono';text-transform:uppercase;font-size:90%;color:black;border-bottom:1px dotted black;}
main header{font-size:80%;}
section{margin:4em 0;}
.aligncontent-center{text-align:center;}
.wrapper{margin-top:66px;padding:1em;background-color:transparent;}
.main-header{text-align:center;font-weight:300;font-size:90%;}
.toolbar{position:fixed;top:0;left:0;right:0;background-color:transparent;line-height:68px;border-top:2px solid #b0120a;}
.menu-button{position:relative;margin:5px;height:36px;width:36px;cursor:pointer;}
.menu-button:before{content:"";position:absolute;top:5px;right:3px;border-bottom:17px double #b0120a;border-top:6px solid #b0120a;width:30px;height:5px;}
.menu-left{float:left;margin-right:1.5em;}
.sidebar{margin:0;padding-top:1em;color:white;background-color:#b0120a;}
.sidebar h6{margin:0 .8em;padding:0;font-weight:300;}
.sidebar li{margin:.5em 0;padding:0 1em;line-height:32px;}
.sidebar li:hover{background-color:#e84e40;}
.sidebar hr{margin:2em auto;border:0;padding:0;width:80%;height:1px;background-color:white;}

CSS代码(media.css):

@media all and (max-width:479px){h1{font-size:2em;}
h2{font-size:1.6em;}
h3,h4,h5,h6{font-size:1.2em;}
}

CSS代码(reboot.css):

html,body{font-size:16px;font-family:'roboto',helvetica,arial,sans-serif;color:black;/*word-break:keep-all;*/
 word-wrap:normal;}
a,a:active,a:focus,a:hover,a:link,a:visited{color:inherit;text-decoration:none;font-weight:inherit;}
abbr,acronym{border-bottom:1px dotted #000;}
blockquote{border-left:2px solid #4db6ac;margin-bottom:1em;padding-left:1em;}
cite:before,q:before{content:'\201C';}
cite:after,q:after{content:'\201D';}
code,samp,kbd,command,var{-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;background-color:#e2e2e2;color:#000;font-family:'Fira mono','Courier New',Courier,monospace;font-size:85%;letter-spacing:.05em;padding:0 .5em;}
dl dd{margin:.5em;padding-bottom:1em;padding-left:1em;}
b,strong,dl dt{font-weight:700;}
h1,h2,h3,h4,h5,h6{margin-bottom:.3em;}
h1{font-size:3.5em;}
h2{font-size:3em;}
h3{font-size:2.5em;}
h4{font-size:2em;}
h5{font-size:1.5em;}
h6{font-size:1.2em;}
hr{margin:1em;border:0;height:1px;background-color:lightgrey;}
iframe{margin:0 auto;max-width:100%;}
p{line-height:20px;margin-bottom:1em;}
pre{margin-bottom:1em;overflow-x:auto;}
small{font-size:70%;}
sub{font-size:80%;vertical-align:sub;}
sup{font-size:80%;vertical-align:super;}
u{text-decoration:underline;}
address,cite,i,em{font-style:italic;}

CSS代码(reset.css):

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;margin:0;padding:0;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,textarea{display:block}
ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:none}
table{border-collapse:collapse;border-spacing:0}
div:after{clear:both;content:'';display:block;line-height:1px}
iframe,img,embed,object,video,canvas{max-width:100%}
img{height:auto;}
*:focus,button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover{outline:0}

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