テンプレートによる無料素材：ＣＳＳ メニューボタン 縦並び垂直
スタイリッシュなCSSメニューを揃えてみました。そのままソースをダウンロードすることが出来ます。
色味、メニュー数のカスタマイズは自由にどうぞ。
テンプレートMenu #SB2
Side Bar (サイドバー) No2 Update : 09/07/22
Download
設置方法
インストール
1： 『images』フォルダ『style.css』をディレクトリにアップロードしてください。
2： 下記のHTMLコードをコピーして、ペーストしてください。
<![CDATA[
<div id="menu-side-bar2">
<ul id="toplevel">
<li><a href="#url">SAMPLE 1</a></li>
<li><a class="fly" href="#url">SAMPLE 2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 2-1</a></li>
<li><a href="#url">SAMPLE 2-2</a></li>
<li><a href="#url">SAMPLE 2-3</a></li>
<li><a href="#url">SAMPLE 2-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">SAMPLE 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 3-1</a></li>
<li><a class="fly" href="#url">SAMPLE 3-2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 3-2-1</a></li>
<li><a href="#url">SAMPLE 3-2-2</a></li>
<li><a class="fly" href="#url">SAMPLE 3-2-3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 3-2-3-1</a></li>
<li><a href="#url">SAMPLE 3-2-3-2</a></li>
<li><a href="#url">SAMPLE 3-2-3-3</a></li>
<li><a href="#url">SAMPLE 3-2-3-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SAMPLE 3-2-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SAMPLE 3-3</a></li>
<li><a class="fly" href="#url">SAMPLE 3-4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 3-4-1</a></li>
<li><a href="#url">SAMPLE 3-4-2</a></li>
<li><a href="#url">SAMPLE 3-4-3</a></li>
<li><a href="#url">SAMPLE 3-4-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">SAMPLE 3-5<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 3-5-1</a></li>
<li><a href="#url">SAMPLE 3-5-2</a></li>
<li><a href="#url">SAMPLE 3-5-3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">SAMPLE 4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 4-1</a></li>
<li><a class="fly" href="#url">SAMPLE 4-2<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 4-2-1</a></li>
<li><a href="#url">SAMPLE 4-2-2</a></li>
<li><a class="fly" href="#url">SAMPLE 4-2-3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 4-2-3-1</a></li>
<li><a href="#url">SAMPLE 4-2-3-2</a></li>
<li><a href="#url">SAMPLE 4-2-3-3</a></li>
<li><a href="#url">SAMPLE 4-2-3-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SAMPLE 4-2-4</a></li>
<li><a href="#url">SAMPLE 4-2-5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">SAMPLE 4-3<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 4-3-1</a></li>
<li><a href="#url">SAMPLE 4-3-2</a></li>
<li><a href="#url">SAMPLE 4-3-3</a></li>
<li><a href="#url">SAMPLE 4-3-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SAMPLE 4-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="fly" href="#url">SAMPLE 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">SAMPLE 5-1</a></li>
<li><a href="#url">SAMPLE 5-2</a></li>
<li><a href="#url">SAMPLE 5-3</a></li>
<li><a href="#url">SAMPLE 5-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SAMPLE 6</a></li>
</ul>
</div>
]]>
HTMLファイルから外部スタイルシートへリンク
1： 外部Style Sheetを利用したいHTMLファイルのソースにリンク設定を追加する。各HTMLファイルの<head></head>の間に次のように入力。
<link href="style.css" rel="stylesheet" type="text/css" />