css3侧滑栏

来源：互联网发布：北京谷歌seo推广编辑：程序博客网时间：2024/06/11 09:47

右侧滑动的

不多说直接自己看代码

<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>

0 0