以下是 jQuery手机网站左侧导航菜单js代码 的示例演示效果:
部分效果截图:
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" />
<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="#" target="_blank">DcDev Homepage</a></li><a href="#">
</a><li><a href="#" target="_blank"></a><a href="#">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代码(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;}
}
分享到QQ
分享到微博
微信扫一扫
