HOME > TOOL（ツール） > サンプル集―スタイルシートサンプル > スクロールしても表示位置が変わらないメニューバー

スクロールしても表示位置が変わらないメニューバー

サンプル

メニューの位置を指定して固定することで、常に同じ位置に表示させます。
使い方次第では個性的なサイトになります。
ただし、IE6.0の場合にはHTMLのDOCTYPE宣言文を"stirict"にしないと出来ないので、注意してください。

ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>スクロールしても表示位置が変わらないメニューバー</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-image: url(fixedimage.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment:fixed;
}
#menu {
width: 100%;
height :40px;
background-color: #595959;
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
}
.fixmenu {
top: 0px;
left: 0px;
width: 600px;
height :24px;
list-style-type: none;
text-align: center;
margin: 0px;
padding: 0px;
}
.fixmenu li {
width: 85px;
float: left;
border-right: 1px solid #878787;
background-color: #595959;
padding: 7px;
}
.fixmenu li a {
width: 85px;
color: #ffffff;
background-color: #595959;
font-size: 13px;
}
.fixmenu li a:hover {
color: #50CDE6;
}
.kotei {
color: #565656;
}
</style>

</head>
<body>
<ul class="fixmenu"> <li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li>
<li><a href="#" onclick="window.close()" class="close">閉じる</a></li>
</ul>
</body>
</html>