Good Sleep｜Webデザイナーの日々のスキマ

はじめまして。
実は、会社でホームページを作ることになり、
JavaScriptもわからないまま、ドロップダウンメニューを作ることになりました。

ひとつ、ダウンロードさせていただいたソースについて
質問なのですが、
画像に、ロールオーバー用として、それぞれ２つずつ作られていますよね。

ファイル名のあとに、『_o』とついてるものは、
どのように指定したのですか？

それがどうしてもわからず、気になっています。
もしよろしければ、お教えいただけないでしょうか。
よろしくお願い致します。

コメントありがとうございます。
ロールオーバー処理もJavaScriptで行います。詳しくは直接メールさせていただきますので、しばらくお待ちください。では。

こんにちは。
メールありがとうございました。
とても親切にご指導頂き、感激致しました。

ただ、もうひとつ疑問が出てきてしまったので、
メールさせて頂きました。
何度も申し訳ありません…。

了解です。
今度はcssの話ですね。メールお送りいたしますので、しばらくお待ちください。

お返事が非常に遅くなってしまっていて、申し訳ありません。

メッセージ、ありがとうございました。

おかげで、教えて頂いた方法で、作ることが出来ました。

詳しくは、メールにて、返信させて頂きますね。

すみません…。

はじめまして。cssを調整すれば、半透明処理も可能ですとのことですがどのように記述すればよいのでしょうか？
よろしくお願いいたします。

kh2003さん、コメントありがとうございます。
サンプルのnaviフォルダにDropDownMenu.cssというスタイルシートが入っています。
その48行目以降が半透明処理です。
※現在、不透明度90％にしてあります。

filter: alpha(Opacity=n);
というのが、IE用でnには、1〜100の数値が入ります。

opacity: n;
というのが、その他のブラウザ用でnには、0〜1.0の小数が入ります。

いろいろと数値を変えて試してみてください。

了解致しました。ご親切にありがとうございました。

こんばんは。
やっと見つけました。画像用版のプルダウンメニュー。
特殊な文字を使いたいので画像版を探してました。
いろいろ探しましたが、すべて文字用でした。
初心者の私でも使えるか、頑張って解読します。
それでは！
ありがとうございました。

kojiさん、コメントありがとうございます！

コーディングとCSSの知識が若干必要ですが、理屈さえ判ればそんなに難しくないと思います。
頑張ってみて下さい！

こんにちは。
いろいろと試行錯誤で解読しましたがどうしてもわかりません。

プルダウンメニューを設置する位置が思うように設定出きません。

画像のサイズ変更がうまく行きません。
サンプルより画像のサイズが大きいです。

各メニューの間にバランスをとるためすき間が必要になりました。広げることは出来ますか？

もしご迷惑でなければ、お教えて頂けないでしょうか？
時間の空いてる時でもお願いできますか？

すみません。

こんにちは。

先ほど、質問を送ったのですが投稿されないのですが
届いてますか？

本当に失礼ばかりで申し訳有りません。

kojiさん、コメントありがとうございます。

スタイルシートの知識はお持ちでしょうか？
また、htmlをソースコードで編集できますでしょうか？まず、そこをクリアしないコトには難しいと思います。

コメント文だけでは具体的な状態が分かりませんが、
状況に応じてstyle.cssとDropDownMenu.css、２つのスタイルシートの設定を変えれば対応できるハズなんですが…。

htmlのソースコードと２つのスタイルシートをじっくり見ていただいて、理屈を分かって頂ければできるはずです。
他のサンプルなども見ていただいて、参考にしてみるのも良いかと思います。

※ちなみにスパム対策で、こちらが確認するまでコメント・トラックバックをいただいても反映されません。ご了承下さい。

こんばんは。
返信ありがとうございます。
もう一度、一から解読します。
_notesは、何でしょうか？
全てのファイルに有ります。
削除しても問題無く動きますが必要でしょうか？
何度もすみません。

kojiさん、コメントありがとうございます。

_notesファイルは、Dreamweaver（ウチで使っているのはver8です）で勝手に作ってしまうファイルです。
※「勝手に」と書きましたが、ちゃんとした使い道はあります。

なので、削除してもらって全然構いません。

（おそらく、_notesで検索をかければ、どういうモノなのか分かるハズなんですが…）

プルダウンメニュー（ドロップダウンメニュー）を作るのは良いのですが、その前に基本的なWebの知識、htmlやCSSの作り方を勉強してからの方が理解できると思います。
とかくWebの世界は流れが速いので、付け焼き刃ではすぐ着いていけなくなります。
遠回りに思うかもしれないですが、基礎から地道に勉強していく方が必ず力になります。
頑張ってみてください。

こんにちは。
いろいろとありがとうございます。
早く作りたく、気ばかりが焦ってました。
確かに、基礎を知らずに作っても
トラブルがあった場合、解決する事も出来ないですね。
頑張ります。

初めまして。

以前、投稿された方と同じ質問なのですが、
ロールオーバー用の画像で、「_o」とついてる
ものの指定の仕方がどうしても分かりません。
私にも教えて頂ければと思います。。

宜しくお願い致します。

pinさん、コメントありがとうございます。

jsフォルダの中にあるnavi.jsというJavaScriptで制御します。
このブログのコメント覧では、htmlタグを受け付けていないので、詳しい設定方法はメール致します。
しばらくお待ち下さい。

なんとかできました。とても助かりました。
丁寧に教えて戴き、どうもありがとうございました！

こんにちは。
なんとか作る事が出来ました。
大変、助かりました。

質問なんですが、
body onload="initRolloversをbody以外に
指定出来ますか？
色々、試したのですがエラーになってしまいます。
何か方法が有れば、教えて頂ければと思います。

宜しくお願いします。

kojiさん、コメントありがとうございます。

ご質問の件ですが、
navi.jsに下記のスクリプトを追加すれば、htmlには何も記述しなくても良くなります。

try{
window.addEventListener("load",initRollovers,false);
}catch(e){
window.attachEvent("onload",initRollovers);
}

ちなみにですが、この方法を使うと、他に body onload を設定するJavaScriptがある場合でも併用して使用できるようになります。

こんにちは。
お礼の返事が遅くなり申し訳ございませんでした。
うまく動くようになりました。
わかりやすく、丁寧に教えていただき、
色々、有難ういございました。

kojiさん、コメントありがとうございます。

プログラムを勉強した人間ではないので、JavaScriptの中身まではよく分かっていないのですが、何とかお役に立てたようで良かったです。

こんにちは。はじめまして。

プルダウンのロールオーバーが出来る素敵なメニューを見つけたので、是非使わせて頂こうと思いました。

画像が入っているimgフォルダ名を変更すると、ロールオーバーをしなくなってしまいました・・・。

navi.jsの17行目のカッコ内のタグを変更したのですが、他に変更しないといけない部分がどうしても分かりません。

申し訳ないのですが、教えていただけないでしょうか？
よろしくお願いいたします。

rioさん、コメントありがとうございます。

ただ、コメントを読んだだけではどういう症状かわかりません。
申し訳ないですが、各動作を表す用語の使い方が間違っているように思います。

このサンプルは、
メインメニュー（第１階層）をロールオーバー（カーソルを重ねる）するコトによって、サブメニュー（第２階層）がプルダウン（下に引き出されて）して表示されます。

また、ロールオーバー（カーソルを重ねる）時に、画像を差し変えて表示するコトも出来ます。

…といった動作が出来ます。

> ロールオーバーをしなくなってしまいました
というのは、どういうコトでしょうか？

ロールオーバーでプルダウンメニューが表示しなくなったのか、ロールオーバー時に画像の差し替えが出来なくなったのか、どちらでしょうか？

また、navi.jsの17行目は階層のパスではなく、img要素を定義しているので、元に戻して下さい。

お返事ありがとうございます。

>ロールオーバーをしなくなってしまいました。
これについてですが、プルダウンメニューは表示されるのですが、サブメニュー上にマウスを持ってきても色違いで用意した画像が表示されないという状態です。

分かりにくい文章ですいません。

rioさん、コメントありがとうございます。

ロールオーバー時の画像の差し替えは、navi.jsで行っています。

２つ原因が考えられます。
１）元画像と同じフォルダ内に差し替え画像も入れてありますか？
また、画像名も（元画像名）_o.gifのように、元画像名の後に「_o」を付けてありますか？

２）htmlの19行目のように、
body onload="initRollovers();" となっていますか？

以上をクリアしていれば、正しく動作するハズなんですが…。

※navi.jsの17行目は、
var aImages = document.getElementsByTagName('img');
に戻しておいて下さい。

動くようになりました！
大変分かりやすい説明で、お返事も早く頂けて大変助かりました。
色々ありがとうございました。

こんにちは！はじめまして

このメニューを参考にプルダウンメニューが作成できました
ありがとうございました。

そこで質問があるのですが
プルダウンのメニューをクリックした際にBODYの部分？
（例ですと「JavaScriptとcssを読み込めば・・・」と書いてあるところです)
をクリックした内容に書き換えることはできないでしょうか？

あの枠内に別HTMLを表示させるようなイメージなのですが・・・

もしご存知でしたらご教授いただければと思います
よろしくお願いします

あにさん、コメントありがとうございます。

ご質問の件ですが、無難にページごと書き換えるのではダメなのでしょうか？
メニュー部分は、（Dreamweaverなら）ライブラリにしておけば、管理が楽ですし。

１ページ内にすべての要素を記述してタブ（あるいはボタン）で表示範囲を変えるのであれば、他のAlaxを使った方が良いと思います。
例えば…）
http://exyz.cocolog-nifty.com/good_sleep/2007/12/post_0b1d.html

まず、どういう仕組みを作りたいという所を考慮して、それにはどんなインターフェイスを作り、どのAjaxライブラリを利用するのか考えないといけないと思いますよ。

はじめまして。
質問をさせていただきます。
ロールオーバー時、サブメニューを下では無く上に出したい際はどうすれば良いですか？
お教え頂けるとうれしいです。
宜しくお願いいたします。

なかさん、コメントありがとうございます。

このサンプルでは、サブメニューを上に出すというのは難しいと思います。
他のAjaxライブラリを使って出来ない事もないとは思いますが、Flashを使ったインターフェイスが妥当なのではないでしょうか？

コンテンツ下部にメニューがあり、マウスオーバーでサブメニューが上に出るという仕組みでは、小さい表示範囲でアクセスしているユーザーにとって、かなり不便なインターフェイスになると思います。

Flashで表示範囲を固定するか、ブラウザの表示範囲にコンテンツ自体が広がるような仕組みが良いと思いますよ。

いかがでしょうか？

早速のご回答、ありがとうございます！
やはりFlashで作った方が。。とは思ったのですが、第2階層以降はサンプル同様のドロップダウンメニュー、トップページはメイン画像下のナビゲーションから上へサブメニュー掲出という構成だったので、下層に合わせてトップもできたらいいな、、、と考えたもので。。
ご指摘頂いたように、Flashでの製作を提案してみます。本当にありがとうございました。

画像を使った半透明の上へ出るドロップダウンメニューのサンプルってどこかに無いのでしょうかね。。

なかさん、コメントありがとうございます。

htmlの記述の順序があるので、サブメニューを上に出すというのは、なかなか難しいと思います。

まだ、こちらのサンプルだとポジションに融通が利くので出来ない事もないとは思いますが…。
http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_8537.html

ただし、サブメニューのそれぞれの列は高さを揃える必要があったり、ブラウザによってバグが出たり…、思い通りインターフェイスにするにはなかなか苦労すると思います。

Flashの設置が可能であれば、そちらの方が良いと思いますよ。

お返事遅くなってすみません。
やはり色々考えてみたのですが、難しいですよね。。ご丁寧にお答え頂いて本当にありがとうございました！フラッシュで作成する方向で動き始めました。ありがとうございました。

なかさん、コメントありがとうございます。

Flashを使わず、プルアップメニューを作るのは、かなり苦労すると思います。
トップページ限定という事であれば、Flashで作るのが妥当だと思いますよ。

swfobject.jsというJavaScriptを使えば、Flash Playerが対応していない環境でも代替表示できますし、その代替表示エリアで、セカンドページ以降のインターフェイスを取り込んであげれば、アクセシビリティも十分だと思います。
ご参考まで。

http://exyz.cocolog-nifty.com/good_sleep/2007/06/flash_javascrip_a593.html

〜追記 2010.11.11〜
たまたま見つけたのですが、プルアップメニューありました！
まあ、２年も前のコメントなので、だれも見ていないと思いますが、自分の覚え書きのために書いておきます。

http://aplus.rs/adxmenu/examples/hbt/

↑このサンプルで解決できると思います。

はじめまして、DropDownMenuを使ってメニューを作成中の者です！

お陰様で画像を使ってメニューを作ることが出来たのですが、
サブメニュー項目を横並びにしたい時はどういじれば良いのでしょうか？？

以前、画像が使えないポップアップメニューで作ってみた時は、
出てきたsubメニューにマウスオーバーで、
横にさらにsubメニューが出てくる様に出来ていたのですが。。

今回どの様にしてよいか分からず、ご教授願いたいです！

どうぞよろしくお願いいたします！

kenさん、コメントありがとうございます。

サブメニューを単に横並びにしたいだけでしたら、
DropDownMenu.cssの.submenu aにfloat: left;を追加すればできると思います。
ただ、その下にもう１つメニューを追加するのは、このサンプルでは厳しいと思います。

階層をいくつも作るのであれば、下記のページのサンプル等を改良した方が早いと思いますよ。
http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_8537.html

exyz様！

横に出したいだけなので、さっそくやってみます！

ありがとうございます！！！！

何度もすみません、、
まだサブメニューを横並びに出来ずにいるのですが、
本当に単にDropDownMenuのcssに

submenu a {
float: left;
display: block;
/*font: 11px arial;*/
text-align: left;
/*text-decoration: none;
padding: 5px;
color: #2875DE;*/
}

と追加しただけなのですが、これだけで良かったのでしょうか？？

無知ですみません、、どうぞ宜しくお願いいたします！

また、spryメニューのサブメニューの右に出てくるサブメニューに、
更に右に出てくるサブメニューを増やしたい場合、
どういじれば良いのでしょうか？？

併せてご教授お願いしたいです！

どうぞよろしくお願いいたします！！

kenさん、コメントありがとうございます。

まず、
> サブメニュー項目を横並びに…
とありますが、
１）メインメニュー（第１階層）の下にサブメニュー（第２階層）を横並びに表示するという事ではないんでしょうか？

２）メインメニュー（第１階層）の横にサブメニュー（第２階層）を表示させるという事でしたら、今回の修正では間に合いません。

１の場合であれば、上手くいくハズですが、元のサンプルから、どれくらいカスタマイズされたのでしょうか？
その状況が分かりませんので、答えようがありません。

また、
> spryメニューのサブメニューの右に…
とあり、厳しい事を言いますが…、
もっとご自分で勉強された方が良いと思います。世の中には優れたサンプルが色々とあります。ソースコードを眺めて、分からなければ、参考書やWeb系の雑誌を読むなりして研究してみて下さい。
そうしないと、いつまで経っても何も分からないままです。

サブメニュー項目を横並びに…と言うのは、
１）の、メインメニュー（第１階層）の下に出てくるサブメニュー（第２階層）
の３項目を横並びに表示するという事でした。

元のサンプルから、画像・リンク先を入れ替えて、
メインメニューの項目数を６つにした状態なのですが。。

そうですね、もっと自分で研究して頑張ってみます！

今夜が期限だったもので、他力本願全開で申し訳ありませんでした！

kenさん、コメントありがとうございます。

ご質問の件ですが、WindowsのIE6で確認してみると、確かに横並びになりませんでした。
申し訳ございません。

直したファイルを記述されたメールアドレスにお送りしましたので、ご確認ください。

※DropDownMenuの.submenuにwidth: 800px;を
追加しています。
（サブメニューを横並びにして入り切るサイズに幅を設定）

返事が大変遅くなりまして、すみません！

ご丁寧なメールまで本当にありがとうございました！！

無事サブメニューを横並びにできました、、

横並びになってくれた時は、感動さえ覚えました。。

無知な質問にご親切な対応、どうもありがとうございました！！

DropDownMenuを利用させていただいています。

メニューを作り、Firefox3.0にて動作確認をしたところ、
プルダウンメニューから別ページへリンクした後、
ブラウザの戻るボタンで前のページに戻ると
ボタンがロールオーバーしたままになってしまいます。

この回避方法はあるのでしょうか？
回避方法があれば教えていただきたいと思います。
よろしくお願いいたします。

jaさん、コメントありがとうございます。

ウチの環境で検証してみましたが、どのブラウザで行っても、ブラウザの戻るボタンで前のページに戻っても、そのような状態にはなりません。

もしそうなるとしても、ブラウザの仕様だと思います。再描画しないとロールオーバーの状態を保っている可能性もあるでしょう。

その場合は申し訳ないですが、僕では分かりかねますので、他に解決策がないかお探しいただけませんか？

…お役に立てず申し訳ございません。

ご確認ありがとうございました。

Flash上にプルダウンメニューを重ねるプログラムをダウンロードして再度設定をしてみたところ、そのような現象は起きませんでした。

そちらのプログラムを利用させていただきます。
完全な解決策ではありませんでしたが、自分ではOKとします。
お騒がせ致しました。

jaさん、コメントありがとうございます。

こちらでも時間のあるときに詳しく調べてみます。
ご指摘ありがとうございました。

はじめまして。

私は今会社のHPを作成しています。
ページのメニュー部分にプルダウンメニューを
取り入れる事になりました。

こちらのサンプルを使用させて頂こうと
思っています。
ある程度本なども揃えて、作成出来る状況には
なったのですが、大して知識があるわけでもなく
行き詰まっています･･･。

質問があるのですが、画像の大きさを変えて
みたのですが、プレビューで確認すると
画像が重なってしまいます。
どうすればいいのでしょうか??

myumyuさん、コメントありがとうございます。

画像が重なるというのは、横に重なるんでしょうか？

だとすれば、CSSの幅の設定も変更しなければいけません。…どこを変更すれば良いか分かりますか？

サンプルで言うと、
１）DropDownMenu.cssの#dd .mainmenu a.menuのwidthを実際の画像の幅に変更して、

２）それに併せてstyle.cssの#wrapperのwidthを各メニューの幅を合計した値に変更して下さい。

コーディング全般を基礎から勉強しないと、なかなか思い通りには作れません。
正しいマークアップの仕方とCSSの設定方法を勉強してみて下さい。

早速お返事頂きありがとうございました。

今試してみたところ
上手くいきました!!ありがとうございます。

今からサブメニューの変更もしていきます。
サブメニューの方も同じように変更
すればよいのでしょうか??

立て続けにすいません。

ボタンの数を５つに増やしたのですが、何故か
４つ目と５つ目のボタンだけプルダウン
してくれません。

どこを変更すればよいのでしょうか??

myumyuさん、コメントありがとうございます。

厳しいコトを言いますが、プルダウンメニューを作るには、まだまだ知識と技術が不足していると思います。
本を揃えただけではダメです。もう少し基礎を良く勉強して下さい。

また、このブログは、単に自分が便利だと思ったサンプルを紹介しているだけで、手取り足取り教えられる訳ではないコトをご了承ください。

HTMLソースを良く見ると、一定の法則が見えてくるはずです。

例えば、３番目のメニューなら、
メイン階層が
class="menu" id="mmenu3" onMouseOver="mopen(3);"
サブメニュー部分が
class="submenu" id="menu3"

…となっているハズです。

このid="mmenu3"やmopen(3)、id="menu3"が関係あるのでは？と、気づかないですか？

それらを該当する数字に変えて下さい。

お返事ありがとうございます。

全く知識が無いわけではなく、一応高校では
プログラミングを勉強していたので
出来るかな･･･と思って挑戦してみたのですが･･･。

cssやjsに関しては大した勉強をしていないので
私の元々の知識では少し難しかったようです。

class="menu" id="mmenu3" onMouseOver="mopen(3);"
↑こちらは該当する数字に変更していたのですが
class="submenu" id="menu3"
↑こちらを見落としていました。

色々とご丁寧に教えて頂いて本当に
ありがとうございました。
おかげさまで理想のメニューを作る事が
出来ました。
これからもっと日々少しずつ勉強して
自分で解決出来るように精進していきます。

本当にありがとうございました。

myumyuさん、コメントありがとうございます。

プログラムを勉強をされたのなら、cssやjsは簡単だと思います。
僕なんかは全くの素人ですので、そのうち足下にも及ばなくなると思いますよ。

是非基本から勉強してみて下さい。

最後にもう１つだけ教えて頂いても
よろしいでしょうか･･･。

作成したＨＰ内にボタンを設置すると
全部が中央表示になったり、ボタンがプルダウンせずに
横１列に表示されたりするのですが、それは
何故なんでしょうか??

設置したい位置に表示出来ないのですが･･･。

何度もすいません。
プログラムを書く位置を間違えていました。

ちゃんと表示されるようになりました。
ありがとうございました。
いいＨＰが出来そうです。

大変ありがたいサンプルで、早速使わせていただいております。
設置は出来てほぼ完成しているのですが、一つだけどうやってもできないものがあります。

http://www.mos.co.jp/index.php
このサイトのプルダウンメニューのように、プルダウン（submenu）にカーソルがある場合、mainmenuの「img_menu01_o.gif」の画像のまま表示させたいのですが、どうしてもできません。

今の状態はsubmenuにカーソルがある場合は「img_menu01.gif」に戻ってしまいます。

ご教授いただけないでしょうか？
宜しくお願い致します。

soranさん、コメントありがとうございます。

このサンプルでは、jsフォルダ内のnavi.jsを使いロールオーバー時に画像を差し替えています。
その辺りは理解されていますでしょうか？

効率の良さやページの整合性を求めるのなら、JavascriptやCSSを用いて、カレント表記するのが良いとは思いますが、ある程度の経験値が必要です。

簡単に行うならば、
そのページに該当する第一階層のメニュー画像をロールオーバー時のモノ（例えば、img_menu01_o.gif）に変えて、 その画像に記述されている「class="imgover"」を削除して下さい。

ただし、手作業で各ページを修正しなければいけないので、多少手間がかかります。

こんにちは。はじめまして。
画像バージョンのプルダウンメニューを探していて、こちらに辿り着きました。まさに欲しかったもので、すごく嬉しいです！

でも、何人かの人もおっしゃっていますが、ロールオーバー効果の設定の仕方が分かりません。。
教えていただたら光栄です。
よろしくお願い致します。

8shitさん、コメントありがとうございます。

ロールオーバー効果は、navi.jsで処理しています。
該当する画像に「_o」を付けて、同じフォルダに置きます。
（例えば、元がimg_menu01.gifなら、img_menu01_o.gifを追加）
そして、該当する画像ソースに「class="imgover"」を記述して下さい。

そうすれば、navi.jsが作用して、img_menu01.gifをロールオーバーすると、img_menu01_o.gifに差し替える仕組みです。

ソースコードを良く見てもらえれば、分かると思いますよ。

お返事ありがとうございます！
分かりました！！
こんな初歩的なこと聞いてしまって、どうもすみませんです。
貴重な技術をこうやって公開していただけていること、感謝します。これからも期待しています★

職場のサイトをリニューアルするということでAdobe DreamweaverCS3でspryを使ってメニューを作ったのですがwindowsのIE7で見るとサブメニューが全部左側に出てしまうのです。cssを色々触ったのですが変わりません。
もうお手上げなんです。
それで色々検索したらこのサイトを見つけることができました。厚かましいお願いですが、対策があれば教えていただきたいです。
お返事をいただきましたらURLを送らせていただきます。
環境はIntel Mac OSX10.4.11です。
よろしくお願いします。

koyumeさん、コメントありがとうございます。

CSS（場合によっては、Javascriptも…）の中身を見ないと何とも言えませんし、このサンプルとspryでは、作り方が違います。

spryを使ったプルダウンメニューは、下記のエントリーで紹介していますので、まずは参考にしてみて下さい。

http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_8537.html

また、このブログは、自分の覚え書きのような物ですので、基本的にご質問等は受け付けておりません。
ご自身で解決くださればと思います。ご健闘下さい。

解決しました！
cssの一部を書き換えたらできました。
お騒がせしました〜

こんにちは。いつもこちらのサイトを参考に、また勉強させていただいております。どこからコメントしていいか悩んだのですが、マウスオーバーに関わるのでこちらから失礼いたします。今サイト中に　http://shop.ivory.ne.jp/m/sample/maptest.html
のようなメニューを作ろうとしていますが、ずっと愛用しています「rollover.js」を使っています。でもこれですとターゲットの犬の画像は変わってくれません。そこで「swap.js」というのを使って下のメニューを作ったのですが、これですと犬の絵は変わっても、「DOG」のメニューは変わりません。
「DOG」メニューボタンをポイントした時メニューボタンも変わって、同時に犬の絵も変わるというのは、どうしたら実現できますでしょうか。
ちなみに、逆に犬の絵をポイントしても「DOG」メニューが変わるようにしたいのです。アドバイスをいただけますと大変助かります。でも場所違いでしたら、申し訳ありません(ToT)よろしくお願いします。

marioさん、コメントありがとうございます。
バタバタしておりましたので、ご連絡が遅くなりました。申し訳ありません。

さて、方法はいろいろあると思うのですが…。
手っ取り早いのは、
１）ボタン部分の画像を背景にしてしまい、CSSでロールオーバーの状態を制御する　…とか

２）ボタン部分のa要素の方に、スワップイメージでボタンの画像が変わるよう記述してみる　…とか

やり方は、いろいろあると思います。
ご検討を祈ります。

はじめまして。DropDownMenu.jsのプルダウンメニューについて検索しているうちにこちらのサイトに辿り着きました。
Webサイトの勉強を始めたばかりの自分にはとても勉強になることが多くて、以前のエントリーまで遡って拝見させていただいています。

そこでひとつお尋ねしたいのですが、このサンプルを参考にして、
横に並んだメニューからプルダウンするのではなく、縦に並んだメニュー（リスト的な感じ）にロールオーバーすると、右方向にプルダウンしてサブメニューが表示される
というようにすることは可能でしょうか？画像とテキストのどちらにも対応したいことと、編集も簡単そうなのでこちらのサンプルを使ってと考えています。
可能かどうかと、もしコードをいじって実現可能なのであれば、どの辺を見ればいいかだけでも簡単にヒントをいただけると有り難いです。
お忙しいかとは存じますが、どうぞよろしくお願いします。

Duckさん、コメントありがとうございます。
バタバタしておりましたので、ご連絡が遅くなりました。申し訳ありません。

時間がなくて試してはいませんが、できると思います。

DropDownMenu.cssの
#dd .mainmenuに
position: relative;を追加して、
floatを解除、

.submenuに
#dd .mainmenuから見た位置指定をしてあげると良いと思います。

CSSの仕組みを理解して、いろいろ試してみればできると思います。
ご検討下さい。

はじめまして。プルダウンメニューを探していたらこちらのサイトにたどり着き、ダウンロードしたソースを利用させていただきました。

画像の半透明処理に関して質問させてください。

サンプルのものは通常時もマウスオーバー時も同じ半透明処理ですが、片方だけ（私がしたいのはマウスオーバー時だけ透過無しの処理にしたいです）の処理をしたい場合は、どのようにしたらよいでしょうか？

アドバイスお願いします。

tonさん、コメントありがとうございます。

まず、半透明の処理自体は理解されていますでしょうか？
もし理解されているのなら、
すぐに解決できると思うのですが…。

半透明の処理は、
DropDownMenu.cssの
.submenuで行っているので、

submenu a:hover imgを追加して、
半透明の値を不透明になるような数値にしてみて下さい。

tonです。
アドバイスありがとうございました。
無事解決する事ができました！

半透明の処理自体はできていたので、もっとよく見て考えれば解決できていた問題だったかもしれません。。。初めてのJavaScriptだったので変に難しく考えていました。

お騒がせいたしました！

こんにちは。はじめまして。

こちらのドロップダウンメニューを参考に
なんとか、会社のHPを作成する事が出来ました。

そこでご質問なのですが、下記サイトのような感じで
http://sandbox.leigeber.com/dropdown/dropdown.html

マウスオーバー＆マウスアウトをさせた時に
サブメニューがフェードイン＆フェードアウトを
する事は可能でしょうか？

お忙しい所、すみませんが宜しくお願い致します。

ogさん、コメントありがとうございます。

このサンプルにフェードイン＆フェードアウトを付け加えるより、jQueryのライブラリからご希望に合う物を探す方が現実的だと思います。

jQueryは、記述も割と簡単ですし、たくさんの機能があり、ライブラリも揃っていますので、おすすめです。

「jQuery ドロップダウン」等で検索をかけると、たくさん見つかると思いますので、一度探されてみてはいかがでしょうか？

exyzさん

お返事ありがとうございます。

早速探してみたいと思います。
ありがとうございました。

ken様ご指摘のFirefoxで戻るボタンで戻ると画像が変わったままの現象が起きたので調べてみました。

ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走らないのが原因のようです。

http://d.hatena.ne.jp/hiratara/20080308/1204955060

xyzさん、わざわざ調べて下さりありがとうございます。
勉強になりました！

すみません。一つ質問させてください。
プルダウンした際にイメージ画像・フラッシュの下にサブメニュー
が入ってしまいます。

特別ソースなどを変更していないのですが、何が原因と考えられるでしょうか？？すみません、宜しくお願い致します。

tosiaさん、コメントありがとうございます。

このブログは、質問を受け付ける物ではありませんので、できる限りご自身で調べていただきたいと思います。

…それを踏まえていただき、

> プルダウンした際にイメージ画像・フラッシュの下にサブメニューが入ってしまいます。

上記の件ですが、
イメージ画像のFlashという事でしょうか？
それとも、イメージ画像（jpg等）とFlash（swf）の２種類という事でしょうか？

サブメニューはFlashの下に隠れてしまいますが、イメージ画像（jpg等）の下には隠れないと思います。
いかがでしょう？

Flashは画面を書き換えているので、サブメニューが隠れてしまうのは当然の現象です。
もし、Flashの下に隠れてしまうのを何とかしたいという事であれば、このブログの下記の記事に対策を書いてありますので、参考にしてみて下さい。

http://exyz.cocolog-nifty.com/good_sleep/2007/10/flash_acfa.html

有難うございました。
jpegについてはリンクの設定ミスでした。
flashに関してはswfofject.jsの記載を変更すればいけました。

こんにちは。
こちらのプルダウンメニューを使わせていただいております。
ひとつ、気になることがあるのですが、、、
サブメニューがあるメインメニュー（サブメニューがあるものとないものを並べてメインメニューを作っています）をマウスオーバーすると、
3分の一くらいの割合でサブメニューが一瞬現れてすぐ消えてしまう、という症状が出ます。

原因を探ってみたのですが、解決にはいたらず、少し悩んでいます。
こんなところでこういう質問は違うと分かっているのですが、
もし、原因がすぐお分かりのようでしたら、ご教示いただけますでしょうか？
お忙しいところ申し訳ありませんが、よろしくお願いいたします。

hiroさん、コメントありがとうございます。

申し訳ございませんが、ご質問は受け付けておりませんので、できうる限りご自身で解決していただきたいと思います。

> 3分の一くらいの割合でサブメニューが一瞬現れてすぐ消えてしまう、という症状が出ます。

という事ですが、プログラムですので、ランダムに1/3程度というのはあまり考えられません。
ある条件が重なるのが、1/3程度と考えるのが妥当なのではないでしょうか？

まず、元のサンプルで試してみて、その後カスタマイズしていく過程で検証してみて下さい。
その時に、該当するバグが出るようなら、そのカスタマイズが原因だと思われます。

どういうソースコードか分からないので、何とも言えませんが、下記の文章が少し気になります。

> サブメニューがあるメインメニュー（サブメニューがあるものとないものを並べてメインメニューを作っています）をマウスオーバーすると…

サブメニューがないメインメニューにも、a要素に、
id="mmenuX" onMouseOver="mopen(X);" onMouseOut="mclosetime();"
という記述を残してないですか？
※Xは、該当する数字です。

その部分はプルダウンする仕組みですので、サブメニューがない物に記述してあると、バグを引き起こすかもしれません。

コメントから推測して、こちらで考えつくのはその程度です。
あとはどうかご自身でお調べください。

ご丁寧にありがとうございました。

ご指摘の通り、
サブメニューがないメインメニューにも
id="mmenuX" onMouseOver="mopen(X);" onMouseOut="mclosetime();"
という記述を残したままにしておりました。

この部分を削除したところ、正常に動きました。

基本的なことの知識もないまま質問などしてしまい、本当に申し訳ありませんでした...。
ありがとうございました！

お世話になります。
プルダウンメニューをダウンロードさせていただきましたが、使用方法は「タブの「分割コード」をクリックすると、JavaScript、css、htmlのソースが記述されているので、コピー＆ペーストで使えるようになっています。」ということですが、タブの「分割コード」をクリックするという場所が分かりません。
初歩の初歩で申し訳ありませんが、よろしくお願いします。

jiyujinさん、コメントありがとうございます。

申し訳ございませんが、ご質問は受け付けておりませんので、できうる限りご自身で解決していただきたいと思います。

また、文章も良くお読みいただきたいと思います。

JavaScript + Ajax 実践サンプル集さんのドロップダウンメニュー
http://jsajax.com/Articles/DropDownMenu/286
を紹介させていただいた上で、
それを元に自分で作ったサンプルを載せて、ダウンロード可能な状態にしてあります。

「分割コード」は、
JavaScript + Ajax 実践サンプル集さんのページ
http://jsajax.com/Articles/DropDownMenu/286
に書かれている物ですので、ご理解ください。

ダウンロードしていただいたサンプルのご質問につきましてもお受けいたしかねますので、ご自身でお調べいただきたいと思います。
何卒ご了承ください。

お手数をおかけし申し訳ありませんでした。

ご指導ありがとうございました。

これ、すばらしいです。
でもFLASH画像と組合せた場合、
DreamWeaverCS3 を使用すると下記のようにプルダウンメニューが画像の背面になってしまいます。
http://1st.geocities.jp/kyokuyu/pc/hp/css/dropdownmenu/hpb-dw/drop-dw.htm

HomePage Builder ではそのようなことはありません。
http://1st.geocities.jp/kyokuyu/pc/hp/css/dropdownmenu/hpb-dw/drop-hpb.htm

不思議です。なんとかDreamWeaverCS3で使いたいのですがアドバイスよろしくお願いします。

安倍毅さん、コメントありがとうございます。

ご指定のページのソースを見る限り、
Dreamweaverでは、Internet Explorerのセキュリティの変更で、ページにswfファイルを配置する場合に、AC_RunActiveContent.jsというJavascriptが自動的に読み込まれる仕組みになっており、swfファイルはそのAC_RunActiveContent.jsを使ってページに読み込まれます。（詳しくは下記を参照してください）

http://www.adobe.com/jp/devnet/activecontent/articles/devletter.html

一方、HomePage Builderでは、Internet Explorerのセキュリティの変更の対策がなされていないので（HomePage Builderは使っておりませんので、よく分かりませんが）、swfファイルが直接読み込まれる仕組みになっています。

原因はこの辺りにあるのではないかと思います。

2006年以降、swfファイルはJavascriptを使ってページに読み込むのが、一般的な方法（…正しい方法と言ったら言い過ぎかもしれないので）とされています。

また、このブログでも「Flash上にプルダウンメニューを重ねる」として、サンプルを載せております。今回は、そちらを参考にされてみてはいかがでしょうか？（下記のURLです）

http://exyz.cocolog-nifty.com/good_sleep/2007/10/flash_acfa.html

まあ、そこまでしなくてもご自身の環境下で思ったように見れたら良いというのであれば、HomePage Builderで作られたページのソースコードをDreamweaver CS3の方にコピーしてください。
（※他の環境下では、不具合が出る可能性もあるかもしれません）

HomePage Builderは素人向けの製品です。
HTMLやコーディングのルールを理解していなくても簡単にページが作れてしまいます。
それが手軽で便利と言うなら、それで良いでしょう。

Dreamweaverも別にHTMLやコーディングのルールを理解していなくてもページは作れますが、HTML、CSS、Javascript等を理解する事で、表現の幅がグンと広がり、カスタマイズが効率的になります。

その辺りを理解して、Dreamweaverをお使いになられるのが良いでしょうし、Dreamweaverをお使いになられるのでしたら、さまざまなルールを勉強しなくてはいけないと思います。
（2010.9.25 若干文章を修正）

exyz さん、アドバイスありがとうございます。
プルダウンメニューがFlash の下に隠れてしまう問題は
教えていただいた
http://exyz.cocolog-nifty.com/good_sleep/2007/10/flash_acfa.html
の方法で解決できそうです。
ありがとうございました。

はじめまして。
プルダウンメニューを使用したサイトを制作していて、こちらのブログに辿り着き、大変助かっています。
サンプルの物とは違い、プルダウンしたサブメニューを下段に横並びに表示されるように変更したんですが、サブメニューが多い場合、右端のメニューなどはプルダウンしたサブが大きく右にはみだしてしまいます。
これを、メインとするメニューを中心に下段にサブが表示されるように変更したいのですが、どうすればよいか分からず困っています。
色々いじってみたのですが出来ませんでした。
どうぞ、ご教示お願いします。

げんさん、コメントありがとうございます。

このブログは自分のための覚え書きのような物ですので、基本的にはご自身で解決していただきたいと思います。

文章を拝見する限りでは、「サブメニューを横並びにする」という所までは対応されているようですね。

問題は、サブメニューが各メインメニューの左端の位置から始まるのを改良したいという事でしょうか？

各メニューの幅、各サブメニューの数が分からないので、具体的な数字は言えませんが、

.mainmenu {
position: relative;
}
とし、各サブメニューの左端を絶対配置で調節すれば何とかなるのではないでしょうか？

例えば、
（メイン・サブ各メニューの幅を100pxとすると…）

#menu1 {
position: absolute;
left: 0px;
width: 400px;
}
メインメニューの左端と同じ位置から配置（left: 0px）、
サブメニューが４つあるので、width: 400px。

#menu2 {
position: absolute;
left: -100px;
width: 500px;
}
メインメニューの左端から１つ分左の位置から配置（left: -100px）、
サブメニューが５つあるので、width: 500px。

#menu3 {
position: absolute;
left: -200px;
width: 400px;
}
メインメニューの左端から２つ分左の位置から配置（left: -200px）、
サブメニューが４つあるので、width: 400px。

あとは、どうかご自身でお調べください。
よろしくお願いいたします。

exyzさん、お返事ありがとうございます。

細かな説明でなんとか設定できました！
助かりました！
本当に感謝いたします！
ありがとうございました

初めまして。
プルダウンメニューの作り方が分からなく困っていました。
このサイトをみてものすごく感動いたしました。

教えて頂きたいことが有るのですが、このプルダウンメニューをサイドバーに利用したいと思っていまして、プルダウンを下ではなく右に表示させたいのです。

教えて頂けませんか？

tonさん、コメントありがとうございます。

このブログは自分のための覚え書きのような物ですので、ご自身で解決していただきたいと思います。

また、プルダウンメニューの作り方は、そう難しい物ではありません。CSSを理解すれば、このサンプルをカスタマイズできると思います。

どうか、ご理解下さい。

せっかくご連絡いただいたので、
以下、簡単に説明します。

第一階層の #dd .mainmenu に対して、
float: left; を解除して、
position: relative; を追加する。

第二階層の .submenu に対して、
第一階層から見た絶対位置の left: と top:
を指定する。

以上で出来ると思います。

この後はどうかご自身でお調べ下さい。
よろしくお願いいたします。

質問があります。
サブメニューをテキストにする場合のhtmlの記述が分かりません。
教えてください。

よろしくお願いします。

suika77さん、コメントありがとうございます。

このブログは自分のための覚え書きのような物ですので、ご自身で解決していただきたいと思います。

また、ご質問の件ですが、それほど難しい事だとは思えません。もう少しご自分で努力なさってはいかがでしょうか？

記事中でも紹介してますが、「JavaScript + Ajax 実践サンプル集さんのドロップダウンメニュー（下記URL）」はテキストベースになっています。
http://jsajax.com/Articles/DropDownMenu/286

そちらを参考にして下さい。
よろしくお願いします。

確認があります。
submenu a:hoverに記述してもie8は反応しません。
firefoxやsafariなどは背景色が変わったり文字色が変わったりするのですが
ieだと何か問題あるのでしょうか？

よろしくお願いします。

suika77さん、コメントありがとうございます。

> submenu a:hoverに記述してもie8は反応しません。
という事ですが、
この記事のサンプルも前回紹介させていただいた「JavaScript + Ajax 実践サンプル集さんのドロップダウンメニュー（下記URL）」も当方の環境では、正常に動作しています。
http://jsajax.com/Articles/DropDownMenu/286

suika77さんの環境ではいかがでしょうか？
サンプル自体が動作していないのでしょうか？
サンプル自体が動作していないのでしたら、PCあるいはブラウザの環境が影響しているのかも知れないです。

suika77さん作成されたデータが動作しないのであれば、記述ミスあるいはソースに何か問題があるのだと思います。

いずれにしても状況が判りかねますので、ご自身で解決していただきたいと思います。
よろしくお願いいたします。

ajax技術の紹介ありがとうございます。

UIも良かったので、このドロップダウンメニューを使わせて頂こうと
サンプルをちょこっといじって、ie6で動かしたところ、
変な現象が出てしまいました。

ちなみに、私がサンプルをいじったページはこちらです。
http://www.i-sow.com/temp/dropdownmenu/index.html

プルダウンメニューが表示されるエリアに、SELECTタグを入れただけですが、
ie6で動かしてしまうと、SELECTタグがプルダウンメニューの前面に
出てきてしまうのです。

WEBマスタ様は、このような現象が生じるのはご存知だったでしょうか？
この現象を対策する方法あるようでしたら、ご教授頂きたいのですが。
宜しくお願いいたします。

amberさん、コメントありがとうございます。

> プルダウンメニューが表示されるエリアに、SELECTタグを入れただけですが、
> ie6で動かしてしまうと、SELECTタグがプルダウンメニューの前面に
> 出てきてしまうのです。

そのようですね。
プルダウンメニューとselectタグが重なるようなレイアウトを組んだ事はなかったので、気付いていませんでした。

調べてみると、
----------
IE6では、selectタグはWindowsのコントロールを使用して表示されている。
そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。
特に困るのがz-indexで、JavaScriptでdivタグをドラッグで移動できるようにした場合、ページ内にselectタグがあると、selectタグだけがz-indexを無視して一番上に表示されてしまう。
----------
…という現象が影響しているんだと思います。

試してはいないんですが、
jQuery bgiframe Plugin :
http://brandonaaron.net/code/bgiframe/docs
というのプラグインがあるようで、
これを使えば解決できるかも知れません。

以下、参考にさせてもらったページを記しますので、一読いただければと思います。
よろしくお願いします。

IE6でselectタグ(プルダウン)がz-indexを無視する対策
http://www.programming-magic.com/20071107222415/

IE6でSelectボックスだけz-indexが効かないバグをjQueryで解消する方法
http://d.hatena.ne.jp/nzm_o/20100614/1276529390