スクロールしても付いてくるメニュー
アメブロの一番上とか、このサイトの一番下とかにある、スクロールしても付いてくるメニューを作りたいなと思った。
調べてみたらむっちゃ簡単だった。
cssだけでいけるんだなー。
ポイントは
position:fixed;
ですね。
例えば
>|html|
<ul id="navigation">
<li>ログイン</li>
<li>お問合わせ</li>
<li>サイトマップ</li>
</ul>
||<
のように常に表示させたいメニューを常に(スクロールしても)一番上に置く場合、
>|css|
#navigation {
position:fixed;
top:0px;
left:0;
z-index:1;
}
||<
と設定する。z-indexの数値はもちろん他との関係によるが。
あとは背景色なり、ボーダーなり、いろいろ設定すればよいかと。
関連する見出し語
コメント
おぎやす · 2009-10-07
マジすか!IE6の場合どうしてるんでしょうね。
fixedはIE6で使えないけどね><