無限の翼 MUGEN NO TSUBASA　結希猫個人Webサイト

自分用のメモですので、ワカンネ！っていう方はスルーでお願いします(*'-')

メニューボタンを押すと、下にリンク項目がずらずら〜と表示される
一昔前にえらい流行ってたプログラムの Ajax版をメモメモ。
ウェブページの数量が多いクライアントにお願いされて設置したものです。

使用するプログラムはこちら！
◎JavaScript Dropdown Menu with Multi Levels
http://www.leigeber.com/2008/11/drop-down-menu/

ええ...
完全英語サイトなのでサッパリですね！（笑）

まーサンプルを見てもらえれば分かりやすいかな？

◎サンプルはこちら
http://sandbox.leigeber.com/dropdown-menu/index.html

◎ダウンロードはこちらから
http://forum.leigeber.com/index.php?app=downloads&showfile=7

「Download File」ボタンからダウンロードしてくだされ

で、設置方法なんですがー

解答したフォルダの中に含まれてる、「script.js」「style.css」を、
ページのヘッダー情報内で呼び出すのは基本なので、割愛します。
※名称が安直なので「dropdownmenu」等、どちらもファイル名称の変更をオススメ

で、本体ソースコードには、リストタグの「ul」「li」を使いますので、
css構築する人には嬉しい限りだと思います！ウレシイデス（笑）

まず、Javascriptの読み込み指定をbodyタグの中で記述します。
えーと、ドロップメニューより後であれば場所は任意で大丈夫です。


<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>


それから、本体の設置方法ですけど、


<ul class="menu" id="menu">
　<li><a href="#" class="menulink">Dropdown One</a>
　　<ul>
　　　<i><a href="#">Navigation Item 1</a></li>
　　　<li><a href="#">Navigation Item 2</a></li>
　　　<li><a href="#">Navigation Item 3</a></li>
　　</ul>
　　</li>
　</ul>


本体の「ul」に「class="menu" id="menu"」を追加。
メニューメインボタンの「li」に「class="menulink"」を追加します。
これでドロップダウンメニューは完成です(*'-')

で、2階層以上のページを作るときは、


<ul class="menu" id="menu">
　<li><a href="#" class="menulink">Dropdown One</a>
　　<ul>
　　　<i><a href="#">Navigation Item 1</a></li>
　　　<li><a href="#">Navigation Item 2</a></li>
　　　<li><a href="#" class="sub">Navigation Item 3</a>
　　　　<ul>
　　　　　<li class="topline"><a href="#">Navigation Item 3−01</a></li>
　　　　　<li><a href="#">Navigation Item 3−02</a></li>
　　　　　<li><a href="#">Navigation Item 3−03</a></li>
　　　　　<li><a href="#">Navigation Item 3−04</a></li>
　　　　　<li><a href="#">Navigation Item 3−05</a></li>
　　　　</ul>
　　　</li>
　　</ul>
　　</li>
　</ul>


階層をつくりたいメインメニューボタンの「a」タグに「class="sub"」を追加。
次の階層の一番上になるメニューボタンの「li」に「topline」を追加します。
これで、右側に次の階層のメニュー一覧が表示されます。

この指定を繰り返すだけで、横幅がある分だけ深い階層のメニューを表示することができます。
以上です！

小難しい設定とかないので、かなり楽々で、おお！な感じじゃないかと思われます(*'-')

にしても...
この手の検索ワードって、なにが正解なのでしょうね...
「アコーディオンメニュー」？　「ドロップダウンメニュー」？　「スクロールメニュー」？

うーん。ワカンニャイヽ(;´Д`)ノ

◎参考サイト様
マルチ階層可能なドロップダウンメニュー/ナビゲーション/SolidStateEveryday
http://solidstate.jp/Navigation/DropdownMenu/script_50.html