画像上にポインターを持ってくるとメニューを表示させるには？

おーまいごっと 2000/06/04(日) 21:07:07
全く初歩的なことを聞いてしまいますがご勘弁を・・・。

最近よくメニュー画像の上にマウスポインターを持っていくと、
その下にさらにメニュー一覧が表示されて、その中からコンテンツを選択するという
感じのメニューが増えているようですが、（特に大手サイト)
どうやってそれを実現しているのでしょうか？

私は、高度なJavaScriptやCSSの知識を持ち合わせていないので、
原点からお教え頂けないでしょうか？

ただ、この方式には何パターンかあるようで、
私が希望していますのは、メニュー画像自体をクリックしても
リンクはされないで、あくまでも、その下に表示されるメニューリスト
からリンクを各々張りたいのですが・・・。

全くの初心者のくせに、いろいろ注文つけちゃって、大変申し訳ないですが、
何卒ご指導下さいませっ。

Mugi [E-Mail] [HomePage] 2000/06/04(日) 22:56:50
簡単なものでよければ僕のページにあります。
http://hp.vector.co.jp/authors/VA013453/js/index.htm (26番)

おーまいごっと 2000/06/05(月) 00:13:06
HPでのサンプル見させていただきました。

ボクはJavaScript等では全くの素人ですので、一から聞かせてください。

まずは、このメニュー表示にはJavaScriptだけで実現しているのでしょうか？

一番気になるのは、どんなブラウザでもこのポップアップメニューは正しく表示されるのでしょうか？

今のところ考えているのは、メニュー画像自体にはリンクを張らないつもりですので、もし、このポップアップメニューが表示されないような事があったら、各々のメニューに飛ぶことができないことになっちゃうからです。

あと、ポインターを合わせるだけでメニューが表示されるバージョンの方ですが、いろいろ試させていただいたのですが、ポップアップメニューを表示した後は、メニューの下にマウスアウトしないとメニューは消えませんでした。

メニューの横でも下でも上でも、とにかくポップアップメニューの枠からマウスアウトすれば、メニューが消えるようにしたいのですが。

何か方法はありますでしょうか？

また、このスクリプトを参考にさせて頂く場合、何処をどういう風に自分のサイトに合わせて変更すればよいのでしょうか？

要所要所の変更ポイントをお教え頂けないでしょうか？

全くのド素人でごめんなさい。

あと、こんな風にしたいなという見本サイトはNTTコミュニケーションズのサイトです。

http://www.ntt.com

Mugi [E-Mail] [HomePage] 2000/06/05(月) 00:52:15
> まずは、このメニュー表示にはJavaScriptだけで実現しているのでしょうか？
厳密にいえば、DHTMLです。

> どんなブラウザでもこのポップアップメニューは正しく表示されるのでしょうか？
いいえ。
IE4以降、ねすけ4だけです。

> とにかくポップアップメニューの枠からマウスアウトすれば、メニューが消えるようにしたいのですが。
すぐに修正します。

> 何処をどういう風に自分のサイトに合わせて変更すればよいのでしょうか？
メニューの中身と表示位置。

> こんな風にしたいなという見本サイトはNTTコミュニケーションズのサイトです。
CyberStudioが生成したスクリプトのようですね。
(http://www.apple.co.jp/publishing/internet/cyberstudio31/index.html)
初心者にはカスタマイズしにくいスクリプトだと思いますね。

おーまいごっと 2000/06/05(月) 01:12:00
>> どんなブラウザでもこのポップアップメニューは正しく表示されるのでしょうか？
>いいえ。
>IE4以降、ねすけ4だけです。

ネットスケープ4だけというのは4.5とか4.7とかはダメなのですか？
そうじゃなくて4以降だったらどれもOKということですよね？

>> 何処をどういう風に自分のサイトに合わせて変更すればよいのでしょうか？
>メニューの中身と表示位置。

表示位置とはここの部分ですか？
function popupmenu(e){
var menux=5
var menuy=50
// ↑位置指定

また、ここの部分はどうすればよいのでしょうか？

<div id=menu style="width:200;border:thin navy solid;position:absolute;visibility:hidden;background-color:lightgrey;font-size:11pt;" onmouseover="doposcheck=true">

また、「1ページに複数のメニュー」のバージョンで、「クリックでなくマウスが乗ったらメニュー表示するようにしたもの」にする場合どうすれば良いのでしょう？

この2つのバージョンを合体させたサンプルはありませんか？
（ずうずうしくて大変申し訳ないデス・・）

また、IE4以前やネスケ4以前の方の為にも、

<a href="" onmouseover="popupmenu(event)" onmouseout="setTimeout('if(!doposcheck){hidemenu()}',0)" onclick="return false">
↑このa href=の部分はリンク張っといた方が良いですよね？
そうやっとけば、対応していないブラウザの人でも取り合えずはリンクに飛べますよね？

また、ここの部分で、↓

<div id=menu style="width:200;border:thin navy solid;position:absolute;visibility:hidden;background-color:lightgrey;font-size:11pt;" onmouseover="doposcheck=true">
widthをメニュー画像の幅よりも大きくしても問題ないですよね？

以上、何卒初心者で面倒くさい質問ばかりですが、お願いします。

Mugi [E-Mail] [HomePage] 2000/06/05(月) 06:17:18
> そうじゃなくて4以降だったらどれもOKということですよね？
そうです。
> 2つのバージョンを合体させたサンプルはありませんか？
あれでは汎用性がないので、新しいのを作ってみますね。
ちょっと時間かかるかも。
> a href=の部分はリンク張っといた方が良いですよね？
&
> widthをメニュー画像の幅よりも大きくしても問題ないですよね？
そうですね。

Ｍ子 2000/06/05(月) 12:30:31
プルダウンじゃ無くて、ポップアップにも出来るのでしょうか？
それと、フレームを使っているのですが、下か上のフレームに
このメニューを入れてもクイックナヴィのようにフレームからはみ出して
表示されるのでしょうか？
最後にメニュー全体を画像で表示出来るのでしょうか？

おーまいごっと 2000/06/05(月) 15:13:22
>> 2つのバージョンを合体させたサンプルはありませんか？
>あれでは汎用性がないので、新しいのを作ってみますね。
>ちょっと時間かかるかも。

すみません。お手を煩わせちゃって・・・。(ありがとうデス）
気長に待ってます。

で、再度質問なんですけど、↓これはポップアップメニューの表示位置の指定ですよね？
function popupmenu(e){
var menux=5
var menuy=50
// ↑位置指定

これは、絶対位置でしていますよね？

絶対位置ではない方法で表示場所を指定できますか？

つまり、Mugiさんのサンプルのようにメニュー画像の真下に表示したいのですが、それを絶対位置ではない方法で、出来ないでしょうか？

メニュー画像を置く位置は微妙な所なので、絶対位置では表示が崩れるような気がするのです。

また、divの所で↓、ポップアップメニューの枠のカラーはどうやって指定しているのでしょうか？

以上、よろしくお願いします。

Mugi [E-Mail] [HomePage] 2000/06/05(月) 18:16:03
すみません。
メインマシンが起動しなくなってしまってスクリプト書けそうにありません。

> メニュー画像を置く位置は微妙な所なので、絶対位置では表示が崩れるような気がするのです。
絶対位置指定が基本だと思っています。
NTTのもそうでしょう。
> ポップアップメニューの枠のカラーはどうやって指定しているのでしょうか？
divタグのインラインスタイルシートです。
ほんとは、レイヤーを入れ子にしたりしてもっと見栄えをよくした方がいいですよね。

おーまいごっと 2000/06/05(月) 18:35:04
>> ポップアップメニューの枠のカラーはどうやって指定しているのでしょうか？
>divタグのインラインスタイルシートです。
>ほんとは、レイヤーを入れ子にしたりしてもっと見栄えをよくした方がいいですよね。

スタイルシートということは、MACのネスケでは有効にはならないのでしょうか？

あと、↓この部分の何処を変更すれば、枠の色を変えられるのでしょうか？
バックのカラーは分かるのですが・・・。
<div id=menu style="width:200;border:thin navy solid;position:absolute;visibility:hidden;background-color:lightgrey;font-size:11pt;" onmouseover="doposcheck=true">

以上、よろしくお願いします。

おせっかい 2000/06/05(月) 21:27:02
おーまいごっと氏はMugi氏の好意に甘えて、
負担を掛けすぎなんじゃ？
JavaScriptやcssのリファレンスを参照してMugi氏のスクリプトを
理解する努力をしていただきたいと思いますが？
まあ、Mugi氏はやさしい方なので、こんな風には思ってないかも
しれませんが・・・

おーまいごっと 2000/06/05(月) 21:43:38
自分でも理解しようと努力はしているのですが・・・・。

ただ、どうしてもポップアップメニューが使用したかったもので・・・。

もし、このような質問が負担になるのでしたら、諦めます。

どうかご堪忍を。

おせっかい 2000/06/05(月) 21:56:54
> もし、このような質問が負担になるのでしたら、諦めます。
いやいや、負担かどうかはMugi氏がどう感じるかでしょう。
私は全く負担じゃないですよ。
ただの傍観者ですから。

Mugi [E-Mail] [HomePage] 2000/06/05(月) 22:03:38
[[解決]]
> 自分でも理解しようと努力はしているのですが・・・・。
そうは思いませんでした。
例えば、borderプロパティぐらいこのサイトのリファレンスにも載ってるし、
当てずっぽうに値を変えていってもこれが枠の設定だとわかりますよね。

NTTや僕のスクリプトを参考にしたり、サーチエンジンで探すなどしてがんばってみてくださいませんか。
例のトラブルのせいで、僕の調子もあまりよくないですし。

メニューバー形式ではないですが、初心者でも扱えそうなスクリプトを紹介。
http://popup.jscentral.com/

> Ｍ子 2000/06/05(月) 12:30:31
> プルダウンじゃ無くて、ポップアップにも出来るのでしょうか？
JavaC Boardにもいらした方かな？
もともとはあのサンプルはメニューバーではなくポップアップメニューとして作ったものです。
> フレームからはみ出して表示されるのでしょうか？
IE5.5ではこうなる可能性あり。(未確認)
> 最後にメニュー全体を画像で表示出来るのでしょうか？
メニューの中身はdivタグ内に書いてあるHTMLなので、画像や表などを入れても平気です。

to おせっかいさん
初心者ってこんなもんかなあと思って回答していました。
今回はちょっと僕が甘すぎたかもしれませんね。

Ｍ子 2000/06/06(火) 03:34:18
＞メニューバー形式ではないですが、初心者でも扱えそうなスクリプトを紹介。
＞http://popup.jscentral.com/

結構面白いヤツですねぇ。
でも、使用するサイトのジャンルを選ぶ物ですね。
読み物系？とか情報をメインにするサイト向けですか？
私の所は単純なリンク集ですので問題無いんですが、デザイン
違いのミラーサイトを作ってるので、そこに使うと面白そうです。
色々とアドヴァイスありがとうございました。

[上に] [前に] [次に]