滑らかに開閉するメニューを作りたいのですが。

解決済

質問者：kaz2009
質問日時：2008/11/24 17:42
回答数：3件

自分で調べてみたのですが解決する事が出来ませんでしたので、どなたかお力を貸して下さい。

マウスのオン・オフで、隠れているメニューが閉じたり開いたりするものを作りたいのです。

http://hyper-text.org/archives/2006/12/slide_men …

上記のサンプルが非常に近いのですが、理想としては
・メニュー1
・メニュー2
・メニュー3
・メニュー4
となっている場合、メニュー1にマウスを乗せると
・メニュー1
　・サブメニューA
　・サブメニューB
　・サブメニューC
　・サブメニューD
と表示され、更にサブメニューAにマウスを乗せると
・メニュー1
　・サブメニューA
　　・サブサブメニュー1
　　・サブサブメニュー2
　　・サブサブメニュー3
というような表示を滑らかな動きで閉じたり開いたりするように表示させたいのですが可能なのでしょうか？
参考サイト等ありましたら教えていただけると助かります。

以上宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： mk48a
回答日時：2008/11/25 18:16

>ただの入れ子にしただけでは動かないんですよね。

Javascriptの知識は無いのですが、面白そうなのでやってみたらできましたよ。
入れ子にするだけで大丈夫です。

・サンプルページを「ページを保存」でローカルに保存する
・slidemenu_sample.shtmlをslidemenu_sample.htmlに拡張子を変更する
・sidemenu_sample.jsにmenu_4を追加（menu_1をコピペして、すべてmenu_4に変更する）
・menu_1のリストの部分を以下のように置き換える
<li>
<a href="javascript:void(0);" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">menu #01</a>
<ul id="menu_1" style="display: none;" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">
<li>
<a href="javascript:void(0);" onmouseout="menu_4.hidePopup('menu_4')" onmouseover="menu_4.showPopup('menu_4')">submenu #01</a>
<ul id="menu_4" style="display: none;" onmouseout="menu_4.hidePopup('menu_4')" onmouseover="menu_4.showPopup('menu_4')">
<li><a href="javascript:void(0);">subsubmenu #01</a></li>
<li><a href="javascript:void(0);">subsubmenu #02</a></li>
<li class="bottom"><a href="javascript:void(0);">subsubmenu #03</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">submenu #02</a></li>
<li class="bottom"><a href="javascript:void(0);">submenu #03</a></li>
</ul>
</li>

・sample_menu.htmlをブラウザで開いて動作を確認する

IE7とFirefox3で動作確認しました。

不明な点は補足でお願いします。