- ベストアンサー
マウスオーバーでプルダウンメニュー？
KojiSの回答
- KojiS
- ベストアンサー率46% (145/312)
スタイルシートを使っているのも問題になるかもしれません。スタイルシート内でフォントサイズなども指定しているようですね。 IE5では正常に見ることができました。Netscape4.7ではあまりきれいに表示はされませんでした。 そちらのブラウザーは何ですか？ Netscapeと InternetExplorerは若干動作が違うので、sakko_さんの紹介してくださったページにあるような方法の方が確実だと思います。
関連するQ&A
- プルダウンメニューの位置がずれてしまいます
質問させてください。 メニューボタンにマウスオーバーすると下にサブメニューが表示される、プルダウンメニューを作成しています。（階層メニューというのでしょうか？） Dreamweaverでレイヤーを使って作っているのですが、サブメニューの表示位置がずれてしまって困っています。 以前ご質問させていただき、一番外のTableを中央揃えにしているため、レイヤーの「position」が”absolute”だと画面の大きさによって位置が変わってしまうことがわかりました。 そこで”relative”にすればいいのかと思ったのですが、そうするとDreamweaverの「レイヤー」（←表示／非表示やz-indexを設定したりするプロパティ）から消えてしまうのです。 たぶん、レイヤーとして認識されていないのだと思います。 自分なりに調べ、Javascriptでブラウザの幅－Tableの幅÷2を求め、そこを基点にして”absolute”にすればいいというところまではわかったのですが、知識不足のためいろいろ試してみてもJavascriptエラーになってしまって・・・。 どのように書けばいいのかお教えいただけると、大変助かります。 よろしくお願いいたします。
- 締切済み
- HTML
- プルダウンメニューが隠れてしまいます
indexページにFlashで制作したswf形式のムービーを配置しました。 ところが ヘッダに配置してたメニューからJavaScriptでプルダウン表示されるメニューと ムービーが重なる部分がレイヤーのような状態となり プルダウンメニューがムービーの背面へ隠れてしまい メニューの機能が失われてしまいました ・swfはhtmlに直接配置して表示 ・プルダウンのメニューは外部に置いたjsファイルを読み込んで表示 ・メニューも外部JavaScriptからの読み込み 以上の仕様なのですが問題点はswfの配置方法でしょうか？ それともJavaScriptのレイヤーに問題があるのでしょうか？ アドバイスをお願い致します
- ベストアンサー
- JavaScript
- レイヤーになっているプルダウンメニューの作り方
レイヤーになっているプルダウンメニューの作り方を 教えてください。 ↓これサンプルです。 http://www.jcb.co.jp/index2.html http://www.kokuyo.co.jp/will/actic/index.html htmlじゃなくってJavascriptですか？ Dreamweaverなんかでお手軽に作れたりしないんでしょうか？
- ベストアンサー
- HTML
- プルダウンメニューの方法
いつもお世話になります。 http://203pj.com/design/index.html のサイトのメニューで「デザイン」や「オール電化・エコ」の部分にマウスオーバーするとでるプルダウンですが、FLASHではないようですし、どのような仕組みのものでしょうか？ javasacriptは得意ではないので、javasacriptならどのようなものか、もしくはサンプル等があれば教えていただきたいです。
- ベストアンサー
- JavaScript
- レイヤーのプルダウンメニューの時間調整
ページのレイヤーのプルダウンメニューが 閉じるのが早すぎて項目が選べなくて困ってます。 1.マウスがレイヤー上にあるときは閉じたくない 2.Opera 6.03でも動くように作りたい。 にはどのようなスクリプトに修正したらよろしいでしょうか。 ぜひ教えてください。
- 締切済み
- JavaScript
- プルダウンメニューを設定するには？
ホームページにマウスのポインターを置くと、プルダウンメニューが出るようにしたいのですが、どういうソースを書けばいいのでしょうか？ 参考になるページを教えてください。
- ベストアンサー
- JavaScript
- マウスオーバーのプルダウンメニューについて
すみません。まったくのしろうとです。教えてください。 会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？ どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- CSSでプルダウンメニュー
お世話になります。 添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。 問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。 添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。 そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。 知識がなくどうしていいのかサッパリ分かりません。 どうか助けて下さい！ 下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;} <!--html--> <div class="menu"> <ul> <li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。
- ベストアンサー
- CSS
- Javascriptを使用したプルダウンメニュー
DHTMLのプルダウンメニューについて質問です。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1062604 上記URLの回答No2のソースを元にメニューを作っています。 このソースはonClickでプルダウンメニューが表示できるようになっているのですが、プルダウンで表示されたメニューを消すにはもう一度ボタンを押さなければいけません。 これを、プルダウンメニューからマウスアウトした時に消えるようにするにはどのように記述すればいいのか未熟者でわかりません。 困っているので、ご回答いただければと思います。 よろしくお願いします。
- 締切済み
- JavaScript
補足
ありがとうございます。レイヤーの位置等ずらしてナントカ動くようにはなったのですが、ネットスケープでは、あまりきれいに表示されないのです。この点が今悩んでるとこです onMouseover=\"activateMenu(1,'pd01',33,134) とあるのですが、1,'pd01',33,134のなかの33、が示しているのが何なのかわからないのです。１はメニューNo,pd01はメニューの画像、134はレイヤーのX軸位置なんですが。