响应式手机App样式隐藏侧边栏特效Slidebars插件

来源:https://www.sucaihuo.com/js/1333.html 2017-02-08 18:59浏览(1382) 收藏

Slidebars是一款简单实用的手机App样式隐藏侧边栏特效jQuery插件。该侧边栏插件十分小巧,仅需1555字节的js文件和600字节的css文件。它使用CSS3动画来制作过渡效果,在不支持的浏览器中会使用jQuery .animate()方法来替代。
响应式手机App样式隐藏侧边栏特效Slidebars插件
分类:导航菜单 > 展开收缩 难易:初级
查看演示 下载资源 下载积分: 20 积分
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>响应式手机App样式隐藏侧边栏特效插件</title>
	<link rel="stylesheet" href="demos/libs/bootstrap.min.css">
	<link rel="stylesheet" href="demos/libs/slidebars.css">
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="demos/libs/demos.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div canvas="container" class="close-any main-content">
		<!-- Main content -->
		<header class="htmleaf-header">
			<h1>响应式手机App样式隐藏侧边栏特效插件 <span> A jQuery framework for off-canvas menus and sidebars</span></h1>
		</header>
		<!-- <h1>Slidebars Examples <small>All Four Sides</small></h1> -->
		
		<p>This example has four Slidebars one on each side with pre-defined classes for complete control.</p>
		
		<div class="btn-group">
			<div class="btn btn-default open-left">Open left</div>
			<div class="btn btn-default toggle-left">Toggle left</div>
			<div class="btn btn-default close-left">Close left</div>
		</div>
		
		<div class="btn-group">
			<div class="btn btn-default open-right">Open right</div>
			<div class="btn btn-default toggle-right">Toggle right</div>
			<div class="btn btn-default close-right">Close right</div>
		</div>
		
		<div class="btn-group">
			<div class="btn btn-default open-top">Open top</div>
			<div class="btn btn-default toggle-top">Toggle top</div>
			<div class="btn btn-default close-top">Close top</div>
		</div>
		
		<div class="btn-group">
			<div class="btn btn-default open-bottom">Open bottom</div>
			<div class="btn btn-default toggle-bottom">Toggle bottom</div>
			<div class="btn btn-default close-bottom">Close bottom</div>
		</div>
		
		<div class="btn-group">
			<div class="btn btn-default close-any">Close any</div>
		</div>
	</div>
	<div off-canvas="sb-1 left reveal">
		<!-- Left Slidebar content -->
	</div>
	
	<div off-canvas="sb-2 right push">
		<!-- Right Slidebar content -->
	</div>
	
	<div off-canvas="sb-3 top overlay">
		<!-- Top Slidebar content -->
	</div>
	
	<div off-canvas="sb-4 bottom reveal">
		<!-- Bottom Slidebar content -->
	</div>
	
	<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src="demos/libs/slidebars.js"></script>
	<script>
		( function ( $ ) {
			$( document ).ready( function () {
				// Create a new instance of Slidebars
				var controller = new slidebars();
				
				// Initialize Slidebars
				controller.init();
				
				/**
				 * Control Classes
				 */
				
				// Open left
				$( '.open-left' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Open Slidebar
					controller.open( 'sb-1' );
				} );
				
				// Toggle left
				$( '.toggle-left' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Toggle Slidebar
					controller.toggle( 'sb-1' );
				} );
				
				// Close left
				$( '.close-left' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Close Slidebar
					controller.close( 'sb-1' );
				} );
				
				// Open right
				$( '.open-right' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Open Slidebar
					controller.open( 'sb-2' );
				} );
				
				// Toggle right
				$( '.toggle-right' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Toggle Slidebar
					controller.toggle( 'sb-2' );
				} );
				
				// Close right
				$( '.close-right' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Close Slidebar
					controller.close( 'sb-2' );
				} );
				
				// Open top
				$( '.open-top' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Open Slidebar
					controller.open( 'sb-3' );
				} );
				
				// Toggle top
				$( '.toggle-top' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Toggle Slidebar
					controller.toggle( 'sb-3' );
				} );
				
				// Close top
				$( '.close-top' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Close Slidebar
					controller.close( 'sb-3' );
				} );
				
				// Open bottom
				$( '.open-bottom' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Open Slidebar
					controller.open( 'sb-4' );
				} );
				
				// Toggle bottom
				$( '.toggle-bottom' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Toggle Slidebar
					controller.toggle( 'sb-4' );
				} );
				
				// Close bottom
				$( '.close-bottom' ).on( 'click', function ( event ) {
					// Stop default behaviour and propagation
					event.preventDefault();
					event.stopPropagation();
					
					// Close Slidebar
					controller.close( 'sb-4' );
				} );
				
				// Close any
				$( '.close-any' ).on( 'click', function ( event ) {
					// Check if a Slidebar is open
					if ( controller.active( 'slidebar' ) ) {
						// Stop default behaviour and propagation
						event.preventDefault();
						event.stopPropagation();
						
						// Close any Slidebar
						controller.close();
					}
				} );
			} );
		} ) ( jQuery );
	</script>
</body>
</html>
标签: 隐藏侧边栏
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2