Sidebar ，是 Semantic UI 里的边栏视图 .. 它可以让我们在页面以外显示一些额外的内容 .. 比如你可以用一个按钮切换显示这个边栏 ..

先看一下边栏视图的基本的代码结构 .. 边栏本身可以放在一个 div 里面， 注意这个容器可以放在页面容器的外面 .. 让它可以靠近 body 开始的标签 .. 在这个容器上再添加一个 ui .. 还有 sidebar ..

边栏显示的时候，会把内容推到一边儿 .. 我们需要给这些内容添加一个额外的包装 .. 用一个 div .. 上面加上一个 pusher ..

在它里面，我们再添加一个带图标的按钮 .. 一会儿可以设置一下，点击这个按钮的时候去切换显示边栏 .. div.ui labeled.icon.button .. 在这个按钮里添加一个 sidebar 图标 .. 按钮上的文字标签是.. 菜单 ..

下面再去让这个按钮可以切换显示边栏 .. 这里需要添加点 JavaScript .. 先用 jQuery 找到页面上用来切换边栏的按钮 .. $('.ui.button') .. 然后用一个 click 方法 .. 设置一下在点击这个按钮的时候要做的事情 .. 给它一个匿名函数 .. 在这个函数里 .. 我们可以找到 sidebar .. $('.ui.sidebar') .. 再调用 sidebar() 这个方法.. 给它一个 toggle 参数 ..

意思就是去切换显示边栏 .. 也就是在边栏显示的时候点击按钮会把边栏隐藏起来，在边栏隐藏的时候，点击按钮会把边栏显示出来 .. 保存 ..

点击页面上的这个菜单按钮 .. 边栏会在页面的左边显示出来 .. 内容会向右推 .. 再点一下 .. 会把边栏隐藏起来 .. 内容又会恢复到原来的样子 ..

下面我们再给这个边栏添加点内容 .. 一般这个边栏内容就是一个反向垂直菜单 .. 在这个边栏的容器上 .. 加上一个 inverted .. vertical .. menu ..

然后在它里面，再添加几个项目 ... 保存 .. 再点击这个 菜单 按钮 .. 会显示出边栏的内容 .. 随便点击页面空白的地方 .. 又会把边栏隐藏起来 ..