- ベストアンサー
滑らかに開閉するメニューの作成方法
- 滑らかに開閉するメニューを作る方法について調べましたが、解決策が見つかりませんでした。
- マウスのオン・オフで、隠れているメニューが開閉する仕組みを作りたいです。
- 参考になるサイトや情報があれば教えてください。
- kaz2009
- お礼率20% (1/5)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>ただの入れ子にしただけでは動かないんですよね。 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で動作確認しました。 不明な点は補足でお願いします。
補足
ご回答ありがとうございます。 ただの入れ子にしただけでは動かないんですよね。 当たり前の事なのかもしれませんが・・。 Javascriptはほとんどわからないので困っています。