[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

CSSフローティングメニュー

MENU001
MENU002
MENU003
MENU004
MENU005

機能の概要

画面左にテーブルを配し、これを固定することでスクロールをしても動かないメニューとします。
コンテンツは重ならないように左に余白を取って表示させます。
これによってメニュー部分は常に画面の中に表示されるため、コンテンツをスクロールしてもすぐに使うことができます。
また、メニュー部分は、画像を使わずに幅を調節して、マウスオーバーにも対応した表現を与えています。

左のサンプルではリンクを無効にしています。

製作工程

  1. <table>を使ったメニューの作成
  2. CSSによるコンテンツの幅の調節
  3. CSSでメニュー内のリンクをボタン化

HTML

<!DOCTYPE HTML>
<html>
<head>

（省略）

</head>

<body>
<h1>CSSフローティングメニュー</h1>
<hr>

<table border="2" cellpadding="0" cellspacing="5" id="tmenu"> 
<tr><td><a href="001.html" class="amenu">MENU001</a></td></tr>
<tr><td><a href="002.html" class="amenu">MENU002</a></td></tr>
<tr><td><a href="003.html" class="amenu">MENU003</a></td></tr>
<tr><td><a href="004.html" class="amenu">MENU004</a></td></tr>
<tr><td><a href="005.html" class="amenu">MENU005</a></td></tr>
</table>

<div id="main">

（省略）

</div>
</body>
</html>

CSS

<style type="text/css">
	#tmenu {
		float: left;
		width: 200px;
		position: fixed;
		margin: 10px;
	}
	#main {
		padding-left: 240px;
	}
	.amenu {
		background-color: #CCFFCC;
		color: #006600;
		font-weight: bold;
		display: block;
		padding: 5px;
		text-align: center;
		text-decoration: none;
	}
	.amenu:hover {
		background-color: #FFCCFF;
		color: #FF0000;
	}
</style>

注意点

DTDの記述がないと「position: fixed;」が有効に働かない。

戻る