web-dev-qa-db-ja.com

スクロールまたは静的サイドバーメニューを作成する方法

このURLに示されているようなサイドバーメニューを作成する方法について、プログラミングのヘルプを探しています。

Nettuts Webサイトリンク

サイドバーをWebサイトのサイドバーと同じように機能させ、独自のルックアンドフィールを適用したいと思います。 Nettuts Webサイトで機能するのと同じように、サイドバーをスクロールして、ページを独自の場所に固定したいと思います。これをどのようにプログラムしますか？

htmlcsssidebar
5
Kevin

これは、cssクラス宣言にcssステートメントposition: fixed;が含まれるdivです。

HTML内のdivにこのCSSスタイルを指定すると、機能することがわかります。

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

そのサイドバーは、固定位置の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/

その時点で、必要な機能を備えた要素をサイドバーに追加します。

7
Kevin B

のようなスタイルクラスを作成します。

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