階層化メニューの実現

現在のホームページでは、<ul>タグを使用してメニューを作るのが一般的です。

ソース

<ul>
    <li><a href="tips.html">TIPS</a></li>
    <li><a href="links.html">リンク集</a></li>
    <li><a href="books.html">本の紹介</a></li>
</ul>

CSS適用前

通常は上記のようになりますがCSSを使用して見ためを整えます。

CSS適用後



階層化メニューも同様に<ul>タグをネストして作成する

ソース

<ul>
    <li><a href="tips.html">TIPS</a>
        <ul>
            <li><a href="../tips1.html">TIPS1</a></li>
            <li><a href="../tips2.html">TIPS2</a></li>
            <li><a href="../tips3.html">TIPS3</a></li>
        </ul>
    </li>
    <li><a href="links.html">リンク集</a></li>
        <ul>
            <li><a href="../tips1.html">リンク1</a></li>
            <li><a href="../tips2.html">リンク2</a></li>
            <li><a href="../tips3.html">リンク3</a></li>
        </ul>
    <li><a href="books.html">本の紹介</a></li>
</ul>

CSS適用前

実方法

実現方法は、ざまざまですが今回はAdobe SpryのMenuBarを使用して実現したいと思います。Spryは、adobeが提供している無料で利用できるフレームワークです。Adobe SpryはAdobe Labからダウンロードすることができます。 このフレームワークはDream Weaver CS3でも使われているそうです。上記URLからダウンロードして展開します。するとsamplesフォルダのmenubarに様々なサンプルが入っておりますので参考にしながら実現します。
実現するには４ステップで完成です。

ステップ１：SpryMenuBar.jsの組み込み

SpryMenuBar.jsを同じディレクトリにコピーしソースをヘッダー内に書き込みます。
<script src="SpryMenuBar.js" type="text/javascript"></script>

ステップ２：SpryMenuBarHorizontal.cssの組み込み

<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" >

ステップ３：IDとクラスの指定

<ul id="MenuBar" class="MenuBarHorizontal">
    <li><a href="../tips.html">TIPS</a>
        <ul class="MenuBarItemSubmenu" >
            <li><a href="../tips1.html">TIPS1</a></li>
            <li><a href="../tips2.html">TIPS2</a></li>
            <li><a href="../tips3.html">TIPS3</a></li>
        </ul>
    </li>
    <li><a href="/nks.html">リンク集</a></li>
        <ul class="MenuBarItemSubmenu" >
            <li><a href="../tips1.html">リンク1</a></li>
            <li><a href="../tips2.html">リンク2</a></li>
            <li><a href="../tips3.html">リンク3</a></li>
        </ul>
    <li><a href="books.html">本の紹介</a></li>
</ul>

ステップ４：スクリプトの実行

<script type="text/javascript">
    window.onload = function() {
        new Spry.Widget.MenuBar("MenuBar");
    }
</script>

CSSおよびJavaScript適用後