左侧菜单栏左滑收起展开效果


上一篇文章左侧菜单栏折叠展开效果-超级简单介绍了将菜单列表上下展开的效果,这里在上一篇文章的基础上增加了左右折叠展开,有时候左侧菜单可能占了屏幕的一部分宽度,我们想把左侧菜单栏收缩起来以此让右边可视区域变大,就可以参考这篇文章的效果啦。效果图如下:

一:页面结构:




    
    





二:页面样式css,放在head标签里


三:js代码:



关于菜单折叠收起绑定事件有不明白的可以参考上一篇文章,这里写了两套样式,因为展开状态和折叠状态下子菜单的位置及样式不一样,所以当我们点击展开折叠图标时添加移除元素类名就可以,并且添加菜单栏展开和折叠宽度变化时的动画,采用jquery的animate方法。
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流

你可能感兴趣的:(左侧菜单栏左滑收起展开效果)