![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
自分で調べてみたのですが解決する事が出来ませんでしたので、どなたかお力を貸して下さい。
マウスのオン・オフで、隠れているメニューが閉じたり開いたりするものを作りたいのです。
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
というような表示を滑らかな動きで閉じたり開いたりするように表示させたいのですが可能なのでしょうか?
参考サイト等ありましたら教えていただけると助かります。
以上宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
>ただの入れ子にしただけでは動かないんですよね。
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で動作確認しました。
不明な点は補足でお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスに入っている...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQuery「jplayer」プレイリスト...
-
ツリーメニューについて
-
Jquery の slide.toggle で要素...
-
2階層のメニューを作ってjQuery...
-
複数の画像をランダム(シャッ...
-
javascriptで正規表現の検索が...
-
<li></li>の数を制限
-
特定のクラスを持つ<li>を非表...
-
ページを開いた直後のサブメニ...
-
jqueryのsortableで一部ソート...
-
PukiWikiの左メニューでonMouse...
-
div要素をランダムに表示させたい
-
多階層ドロップダウンのスマホ...
-
ネストされたチェックボックス...
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
C言語のポインタ表現
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
jquery ドロップダウンメニュー...
-
クリックした<a>タグのみにClas...
-
大量のチェックボックス状態取...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
JavaScriptで、?マークとコロ...
-
どの<li><a> が押されたか判別...
-
jQueryのhide,showで中の要素が...
-
javascriptでEnterキーをtabキ...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
同一ページ内で、任意の文字列...
-
jQuery タブメニューへのダイ...
-
Jqueryでリストのスクロール
-
質問に答えていくと、回答によ...
-
JS <a></a>タグ内のリンク先ア...
-
jQueryでネスト構造の<li>がク...
-
【jQuery】遅延実行(タイムラ...
おすすめ情報