css3侧滑栏

最新推荐文章于 2023-01-29 15:38:16 发布

M丶Sic

最新推荐文章于 2023-01-29 15:38:16 发布

阅读量2.2k

点赞数

分类专栏： web前端文章标签： css3 html

本文链接：https://blog.csdn.net/jin123456bat/article/details/70159884

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

右侧滑动的

不多说直接自己看代码

<html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
	body{
		padding: 0px;
		margin: 0px;
	}
	.sidebar{
		width: 220px;
		height: 100%;
		min-width: 120px;
		display: inline-block;
		margin: 0px;
		right: -200px;
		position: fixed;
	}
	.sidebar .sidebar-left{
		width: 20px;
		height: 100%;
		display: inline-flex;
		display: -webkit-inline-flex;
		flex-flow:column nowrap;
		justify-content:center;
		align-items:center;
		float: left;
	}
	.sidebar .sidebar-right{
		width: 200px;
		display: inline-block;
		height: 100%;
		float: left;
	}
	.sidebar .sidebar-pull-button{
		width: 100%;
		display: block;
		height: 100px;
		flex:0 0 auto;
		line-height: 25px;
		text-align: center;
		overflow: hidden;
		cursor: pointer;
	}



	.btn{
		background-color: green;
	}
	.bk{
		background-color: red;
	}

	.slideLeft{
		transform: translate(-200px,0px);
    	transition-delay: 0s;
    	transition-timing-function: ease;
    	transition-duration: 1s;
    }
   	.slideRight{
   		transform: translate(-0px,0px);
    	transition-delay: 0s;
    	transition-timing-function: ease;
    	transition-duration: 1s;
   	}
</style>
<body>
	<div class="sidebar">
		<div class="sidebar-left">
			<div class="btn sidebar-pull-button">
				高级搜索
			</div>
		</div>
		<div class="bk sidebar-right">
		</div>
	</div>
	<script type="text/javascript">
		$('.btn').on('click',function(){
			if(!$('.sidebar').hasClass('slideLeft'))
			{
				$('.sidebar').addClass('slideLeft').removeClass('slideRight');
			}
			else
			{
				$('.sidebar').removeClass('slideLeft').addClass('slideRight');
			}
		});
	</script>
</body>
</html>