点击按钮滑动显示侧边导航栏

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34789629/article/details/52775738
<body>
<aside class="sidebar"></aside>
<section class="wrapper">
	<input type="button" id="button" class="button" value="点击">
</section>
</body>

<style type="text/css">
*{ padding: 0; margin: 0;}
html, body{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.wrapper{ position: relative; width: 100%; height: 100%; overflow-y: auto; transition: all linear .2s; }
.sidebar{ position: absolute; top: 0; right: 0; z-index: 100; width: 200px; height: 100%; overflow-y: auto; background-color: #666; transform: translate3d(200px,0,0); transition: all linear .2s; }
.button{ float: right; margin: 10px; }

.open .sidebar{ transform: translate3d(0,0,0); }
.open .wrapper{ transform: translate3d(-200px,0,0); }
</style>

<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$('#button').click(function() {
	$('body').toggleClass('open');
});
</script>

阅读更多
换一批

没有更多推荐了,返回首页