如何創建一個滾動或靜態工具欄菜單

Question

我期待的節目要了解如何做一個工具欄菜單像這個URL所示：

Nettuts Website Link

我想我的側邊欄，只是功能就像網站上的邊欄一樣，我自己的外觀和感覺也適用於它。我希望側邊欄在固定在自己的位置的頁面滾動，就像它在Nettuts網站上運行一樣。我將如何編程？

Answer 1

它是一個div與css類聲明中的css語句position: fixed;。

給你的html這個CSS樣式的任何div，你應該看到它的工作。

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

Answer 2

那邊欄只不過是一個固定位置的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/

此時，您添加的元素與你想要的任何功能的側邊欄。

Answer 3

創建一個樣式類如..

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