JavaScript 温故: 制作一个sidebar

sidebar是一种常用类型的导航组件,它可从页面旁侧弹出,覆盖在正常内容上。

假设你的正常内容为:

    
Placeholder

Placeholder

Placeholder

现在我们可以在内容内加入sidebar。其内有链接到Home和About。并加入一个按钮,可以打开sidebar,代码如下:

    
    
    

Placeholder

Placeholder

Placeholder

要点在于:

  1. 默认情况下,sidebar是一个div内置任何html,且width为0,因此不可见

  2. 当需要使用sidebar时,可以使用函数设置其width为一个宽度,因此它变得可见

  3. 虽然它变得可见,但是因为z-index为1,因此不会引发主要内容的重新渲染和计算新的位置,而是覆盖其上

你可能感兴趣的:(javascript)