- ベストアンサー
menuの表示
質問です。 以下の例１のような左右に分かれたページで、「サービスガイド」をクリックすると、その下のメニューが下に移動して、その間にサブメニューが表示され、さらにマウスが移動したら、そのサブメニューが閉じて、元に戻るようなスクリプトを探しています。そのようなスクリプトってないでしょうか？ ご存知の方、よろしくお願いいたします。 例１ http://www.starcat.ne.jp/mediacat/
- ironika
- お礼率6% (7/102)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ちょっと作ってみました。 こういうものでは、いかがでしょうか。 <html> <head> <title></title> <script type="text/javascript"><!-- var HD= new Array(); function showdown(tgt){//サブメニューの表示調整 if (document.getElementById){ tar=document.getElementById(tgt); if(tar.style.display=="block"){//サブメニューが表示されている時は隠す tar.style.display="none" } else {//サブメニューが表示されていなければ、表示させる tar.style.display="block"; } } } function hideaway(tgt){// サブメニューからポインタが離れた時の処理 if (document.getElementById){ HD[tgt]=setTimeout('document.getElementById("'+tgt+'").style.display="none"',2000); // サブメニューからポインタが離れたら、2秒後に隠す } } function keepit(tgt){//ポインタがメニューの上に戻った時の処理 if (HD[tgt]){ clearTimeout(HD[tgt]); // サブメニューを2秒後に隠す処理を停止 } } //--></script> </head> <body> <div> <p onMouseout="hideaway('subm1')" onMouseover="keepit('subm1')"> <a href="#" onClick="showdown('subm1'); return false;">メニュー1</a> <span id="subm1" style="display: none;"> <a href="#">サブメニュー1-1</a><br> <a href="#">サブメニュー1-2</a> </span> </p> <p onMouseout="hideaway('subm2')" onMouseover="keepit('subm2')"> <a href="#" onClick="showdown('subm2'); return false;">メニュー2</a> <span id="subm2" style="display: none;"> <a href="#">サブメニュー2-1</a><br> <a href="#">サブメニュー2-2</a> </span> </p> <p onMouseout="hideaway('subm3')" onMouseover="keepit('subm3')"> <a href="#" onClick="showdown('subm3'); return false;">メニュー3</a> <span id="subm3" style="display: none;"> <a href="#">サブメニュー3-1</a><br> <a href="#">サブメニュー3-2</a> </span> </p> </div> </body> </html> サブメニューについては、ここではspan要素に入れて、それをdisplay:none;で隠してあります。 この要素には、必ずidを設定する必要があります。 メニューの方は、a要素でクリックするとサブメニューを表示させるようにしてあります。 これらのメニューをまとめてp要素に入れて、このp要素からマウスが離れたら、サブメニューが2秒後に隠れるように仕掛け、またこのp要素の上にポインタが戻ってきた時にはサブメニューを隠す処理を破棄するようにしてあります。 スクリプトにも説明を入れましたが、それぞれの関数は、 「showdown('表示するspan要素のID')」：指定のサブメニューを表示させる 「hideaway('隠すspan要素のID')」：指定のサブメニューを隠す 「keepit('表示させ続けるspan要素のID')」：指定のサブメニューを隠す処理を破棄する このような処理をまとめてあります。 この他の点については、JavaScriptの解説書や解説サイトなどで確認してみてください。 とりあえず、WinMe上のIE6、Netscape7.1で動作を確認してあります。 Netscape4.xx以前などでは動作しないかもしれません。 参考になれば幸いです。
その他の回答 (1)
補足読みました。 前掲のソースの、サブメニューを括っているspan要素の中は、通常のHTMLと同じように記述することができます。 ですので、リンクのテキスト表示を画像に変えたい場合、あるいはリンク自体をそのまま画像とそっくり置き換えたい場合などは、補足で書かれているように、img要素をテキストやリンクの代わりに入れれば良いでしょう。 それでスクリプトの動作が阻害される事は、ないと思います。
関連するQ&A
- カスケードメニューが表示できなくなりました
ある日突然カスケードメニューが表示できなくなりました。 一例として「スタート」をクリックして右向きの▼印のある「すべてのプログラム」にマウスポインタを合わせるとサブメニューがズラズラズラーと表示されていました。ある時期からマウスポインタを合わせてもそれが表示されなくなりました。 その状態で左クリックすると勿論通常にサブメニューを表示するので、１クリック動作が増えて面倒くさいだけで、極端な実害はないのですが、いちいちクリックしなければならないのでいらいらします。元のように復旧する方法はないでしょうか？
- ベストアンサー
- Windows XP
- マウスを乗せるとメニュー表示
フレームを使ったメニューで、マウスを乗せるとサブメニューが出ると言うスクリプトを探しています。 いくつか見つけることが出来たのですが、メニューの位置が絶対位置指定で直すのが難しく。。。 フレームに画像でメニュー、マウスを乗せるとサブメニューが出て、離すと消える、と。 サブメニューの位置は、マウスの位置によって変わるんではなく、メニューの位置に対してどの位置に表示される、と言うのが望ましいです。メニューからにゅっとサブメニューが現れると言うか…（マウスを乗せるたびにアチコチ変な位置に出るのはうっとおしいかと思うので） 説明が下手で判りづらいかもしれませんが、宜しくお願いします。 IE、ネスケ等にちゃんと対応してくれてるとありがたいです（って言うかぢゃないと困るカモ。。。）
- ベストアンサー
- JavaScript
- ツリー型メニューについて
社内のシステムのマニュアルをhtmlで作ることになりました。 左右２つのフレームにわけて左200ピクセルをメニューにしました。 メニューがこまかく、多くなりそうなので、ツリー型（クリックしなくても、 マウスを乗せるだけで展開するもの）にしようと思ったのですが、 展開した２段目のメニューが、フレームで切られて見えません（T_T) ●●●●にマウスを乗せると・・・ ●●●●┳page1 ▽▽▽▽┣page2 ■■■■┣page3 ┗page4 ↑この辺に、ボーダーがきてしまいます。 あまりメニュー幅を広くしたくないので、 ●●●● ▽┣page1 ■┣page2 ┣page3 ┗page4 こんな風に、すぐ下に展開させたいのですが、どうしたらいいでしょうか？ よろしくご指導お願いします。
- ベストアンサー
- JavaScript
- このようなメニューはどのようにして作成するのでしょうか・・・
メニューをクリックするとページは飛ばずにメニューの下にサブメニューみたいなものを表示させるにはどうすればよいのでしょうか？ 例：http://www.pc-koubou.jp/ ここの左下にあるラインナップのメニュー 初心者的な質問をお許しください
- ベストアンサー
- CSS
- クリックでメニューを表示
初心者で申し訳ないのですがお答えいただけたらと思います。 親メニューに当たる画像orテキストをクリックして 指定箇所に子メニューを表示させ、 その子メニューをクリックしてリンクさせたいと思っているのですが JavaScriptでできるのかどうか、 もしできるのであればどう組めばいいのか よろしくお願いします。 形的には、 http://www.ozaki-gasrange.co.jp/cso_q1-3.html ↑ページのような感じで、 マウスを置いた時ではなく、クリックして 下にメニューを表示させて さらにそのメニューをクリックして右枠にページを 表示させたいと思います。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- サブメニュー?の作り方教えてください。
具体的なページを例にしてしまって申し訳ないのですが以下のページ http://www.geocities.jp/katsurarugby/ の、左側にある「選手紹介」や「予定・結果」をクリックするとサブメニューのようなものが表示されますがあれはどのようにしたら作れるのでしょうか？ ＨＴＭＬタグとかでできるのでしょうか？それとも何か高度な技術が必要ですか？ 教えてください。
- 締切済み
- ホームページ作成ソフト
- ナビゲーションバーからプルダウンメニューをゆっくり表示させる方法。
以下のようなナビゲーションを作ってみました。 使用したのはfireworksCS4です。 http://www.geocities.jp/de_chirico_1911/ page2の上にマウスポインタを置くとサブメニューが出ます。 このサブメニューが上から下にスルスルと降りてくるようなサイトをよく見かけるのですが、↑のアドレスの状態に何か書き加えてどうにかなる問題ではないのでしょうか？ お分かりの方、いらっしゃいましたらよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- プルダウンメニューからインラインフレームに飛ばすタグ
ホームページビルダー９を使用しています。 サイトのトップページのメニューをプルダウンメニューにしています。 このメニューの一部をクリックしたら、同ページのインラインフレーム内にサブメニューを 表示するようにしたいのです。 スクリプトはこんな感じです。 <SCRIPT language=JavaScript> <!-- function mmLoadMenus() { if (window.mm_menu_1118095635_0) return; window.mm_menu_1118095635_0 = new Menu("root",132,28,"left","middle",8,0,1000,-5,7,true,true,true,0,true,true); mm_menu_1118095635_0.addMenuItem("1 ページ","location='○○○/○○○.htm'"); ↑↑↑↑ これは別ウィンドウを開いて表示するタグ。ちゃんと動作します。 うまくいかないのが、nameという名前のインラインフレーム内に表示させようとする以下のスクリプトです。 mm_menu_1118095635_0.addMenuItem("２ページ","location='sub_window/sub1.htm' target="main"); Java Scriptを使わないノーマルな、インラインフレームに飛ばすタグを使用しているのでうまくいかないのだと思います。 どなたかご教授いただければ幸いです。 よろしくお願いします。
- 締切済み
- JavaScript
- phpのプルダウンメニューで選んだものを表示
PHPのプルダウンメニューで選んだものについて、「送信」ボタンをクリックして移動したページに何を選んだのかを表示するプログラムを書きたいのですが、わかりません。 参考になるWEBページなどがありましたら教えてください。 例として、プルダウンメニューで ・好きな食べ物…「りんご」 ・好きな色…「青」 を選び、「送信」ボタンを押してページを移動し、次のページで 好きな食べ物「りんご」 好きな色「青」 と表示させたいです。
- ベストアンサー
- PHP
- windows2000のメニューについて
Win2000のスタートメニューをクリックして、プログラムにマウスポインタを合わせると全てのサブメニューが出てきませんよね?サブメニューの一番下の矢印みたいなものをクリックすると隠れているメニューが出てきます。これを最初から全て出るようにできるでしょうか？お分かりの方、よろしくお願い致します。
- ベストアンサー
- Windows NT・2000
補足
早速の解答ありがとうございます。 もしよろしければ、追加で教えていただきたいのですが、このスクリプトのリンクの部分は、画像に変更しても問題なく動作しますでしょうか？通常通り<img src= ・・・・・・>のタグを挿入すればOKですか？もし、何らかのスクリプトが必要ならば、教えてください。よろしくお願いいたします。