JS实现侧边栏显示隐藏

网页中侧边栏是一个重要的排版位置,尤其是侧边导航栏用的最多。在一些窄屏的侧边导航栏中,控制侧边导航栏的显示与隐藏可以让网页显示更多内容,也可以美化网页。侧边栏隐藏和显示有多种实现方法,这里演示一种简单的方法。

demo案例

下面代码实现了一个侧边栏的显示与隐藏。




  
  
  
  sidebar
  


  
  
显示/隐藏

基本思路就是通过判断侧边导航栏容器元素的左边距离,设置为负数的时候属于隐藏状态。可以通过设置过渡的属性实现显示和隐藏切换时的动画效果。

你可能感兴趣的:(JS实现侧边栏显示隐藏)