如何创建滚动或静态侧边栏菜单

【问题标题】：How to create a scrolling or static sidebar menu如何创建滚动或静态侧边栏菜单
【发布时间】：2011-08-24 18:09:06
【问题描述】：

我正在寻找有关如何制作侧边栏菜单的编程帮助，如该 URL 所示：

我希望我的侧边栏能够像网站上的侧边栏一样工作，并应用我自己的外观和感觉。我希望侧边栏滚动页面，页面固定在其自己的位置，就像它在Nettuts 网站上运行一样。我该如何编程？

【问题讨论】：

【解决方案1】：

创建一个样式类，如..

.class{
    overflow:auto;
    height:100%;
    width:354px;
    top:185px;
}

【讨论】：

【解决方案2】：

它是一个 div，在 css 类声明中带有 css 声明 position: fixed;。

给你的 html 中的任何 div 赋予这个 CSS 样式，你应该会看到它工作。

position: fixed;
height: 132px;
left: 0;
top: 185px;
width: 24px;

【讨论】：

我应该将 div 放在文档中的什么位置？
在标签之间。任何你想要的 css 都会将 div 移动到正确的位置。

【解决方案3】：

那个侧边栏只不过是一个固定位置的 div。

<style>
.sidebar {
   width: 45px;
   height: 90px;
   position: fixed;
   left: 0px;
   top: 300px;
   border: 1px solid black;
}
</style>
<div class='sidebar'>I'm a sidebar</div>

http://jsfiddle.net/p8dFM/

此时，您可以使用任何您想要的功能将元素添加到侧边栏。

【讨论】：