JavaScriptでプルダウンメニュー
ドロップダウンメニュー｜DropDownMenu.js
プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューです。
タブの「分割コード」をクリックすると、JavaScript、css、htmlのソースが記述されているので、コピー＆ペーストで使えるようになっています。
いままでプルダウンメニューをいろいろと試してみたんですが、ブラウザによる表示のズレもなく、画像も問題なく使えました。何よりいつも使っているJavaScript（画像のロールオーバー時に使用）との相性も良かったので気に入っています。
編集も簡単なのでオススメの一品です。
では、サンプルです。
↑このサンプルはこちらからダウンロードできます。
他にもfaLogさんのCSS(とJS)でシンプルなドロップダウンメニュー - 2という記事のドロップダウンメニューも簡単で使い易かったのですが、サブメニュー部分に画像を使うとSafariで不具合が出てしまいました。テキストでＯＫな場合はこちらもオススメですよ。
…と、大変便利なDropDownMenu.jsなんですが、WindowsのIEで不具合を発見！
サブメニューがCSSでpositionプロパティを使った要素の下に隠れてしまいます。positionプロパティを使う際はお気を付けください。
| 固定リンク
トラックバック
この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/16556508
この記事へのトラックバック一覧です： JavaScriptでプルダウンメニュー:
» Flash上にプルダウンメニューを重ねる [Good Sleep]
swf上にHTML要素をレイヤー表示する際の解決策 少し前に「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあ [続きを読む]
受信： 2007.11.04 16:34
» JavaScriptで階層型プルダウンメニュー [Good Sleep]
Ajaxで作る階層型メニューバー｜SpryMenuBar.js 以前、「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介しました。するとこの前、 [続きを読む]
受信： 2007.12.02 17:50
» プルダウンメニュー？ [青森でMovable Type k-ga.jp CMS*]
何気にweb屋さんが作ったwebサイトを見てたら、えっ？。ある意味驚きのサイトが... [続きを読む]
受信： 2008.04.27 11:04
» プルダウンメニューに動きを与えるJavaScript [Good Sleep]
Flashのような滑らかなアニメーション｜MenuMatic このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design St [続きを読む]
受信： 2008.12.11 22:03
» JavaScriptでプルアップメニューっぽくスライド表示 [Good Sleep]
情報ブロックをスライドさせて表示｜web creators 2008 9月号 以前、このブログの「JavaScriptでプルダウンメニュー」という記事に「ロールオーバー時、サブメニューを下では無く上に [続きを読む]
受信： 2009.01.30 18:58
コメント
はじめまして。
実は、会社でホームページを作ることになり、
JavaScriptもわからないまま、ドロップダウンメニューを作ることになりました。
ひとつ、ダウンロードさせていただいたソースについて
質問なのですが、
画像に、ロールオーバー用として、それぞれ２つずつ作られていますよね。
ファイル名のあとに、『_o』とついてるものは、
どのように指定したのですか？
それがどうしてもわからず、気になっています。
もしよろしければ、お教えいただけないでしょうか。
よろしくお願い致します。
投稿： apricot9011 | 2007.11.12 17:33
コメントありがとうございます。
ロールオーバー処理もJavaScriptで行います。詳しくは直接メールさせていただきますので、しばらくお待ちください。では。
投稿： exyz | 2007.11.13 00:51
こんにちは。
メールありがとうございました。
とても親切にご指導頂き、感激致しました。
ただ、もうひとつ疑問が出てきてしまったので、
メールさせて頂きました。
何度も申し訳ありません…。
投稿： apricot9011 | 2007.11.13 11:37
了解です。
今度はcssの話ですね。メールお送りいたしますので、しばらくお待ちください。
投稿： exyz | 2007.11.13 12:56
お返事が非常に遅くなってしまっていて、申し訳ありません。
メッセージ、ありがとうございました。
おかげで、教えて頂いた方法で、作ることが出来ました。
詳しくは、メールにて、返信させて頂きますね。
すみません…。
投稿： apricot9011 | 2007.11.27 13:53
はじめまして。cssを調整すれば、半透明処理も可能ですとのことですがどのように記述すればよいのでしょうか？
よろしくお願いいたします。
投稿： kh2003 | 2008.05.25 05:00
kh2003さん、コメントありがとうございます。
サンプルのnaviフォルダにDropDownMenu.cssというスタイルシートが入っています。
その48行目以降が半透明処理です。
※現在、不透明度90％にしてあります。
filter: alpha(Opacity=n);
というのが、IE用でnには、1〜100の数値が入ります。
opacity: n;
というのが、その他のブラウザ用でnには、0〜1.0の小数が入ります。
いろいろと数値を変えて試してみてください。
投稿： exyz | 2008.05.25 18:41
了解致しました。ご親切にありがとうございました。
投稿： kh2003 | 2008.05.26 06:07
こんばんは。
やっと見つけました。画像用版のプルダウンメニュー。
特殊な文字を使いたいので画像版を探してました。
いろいろ探しましたが、すべて文字用でした。
初心者の私でも使えるか、頑張って解読します。
それでは！
ありがとうございました。
投稿： koji | 2008.06.02 20:59
kojiさん、コメントありがとうございます！
コーディングとCSSの知識が若干必要ですが、理屈さえ判ればそんなに難しくないと思います。
頑張ってみて下さい！
投稿： exyz | 2008.06.03 00:05
こんにちは。
いろいろと試行錯誤で解読しましたがどうしてもわかりません。
プルダウンメニューを設置する位置が思うように設定出きません。
画像のサイズ変更がうまく行きません。
サンプルより画像のサイズが大きいです。
各メニューの間にバランスをとるためすき間が必要になりました。広げることは出来ますか？
もしご迷惑でなければ、お教えて頂けないでしょうか？
時間の空いてる時でもお願いできますか？
すみません。
投稿： koji | 2008.07.22 18:15
こんにちは。
先ほど、質問を送ったのですが投稿されないのですが
届いてますか？
本当に失礼ばかりで申し訳有りません。
投稿： koji | 2008.07.22 18:24
kojiさん、コメントありがとうございます。
スタイルシートの知識はお持ちでしょうか？
また、htmlをソースコードで編集できますでしょうか？まず、そこをクリアしないコトには難しいと思います。
コメント文だけでは具体的な状態が分かりませんが、
状況に応じてstyle.cssとDropDownMenu.css、２つのスタイルシートの設定を変えれば対応できるハズなんですが…。
htmlのソースコードと２つのスタイルシートをじっくり見ていただいて、理屈を分かって頂ければできるはずです。
他のサンプルなども見ていただいて、参考にしてみるのも良いかと思います。
※ちなみにスパム対策で、こちらが確認するまでコメント・トラックバックをいただいても反映されません。ご了承下さい。
投稿： exyz | 2008.07.22 18:58
こんばんは。
返信ありがとうございます。
もう一度、一から解読します。
_notesは、何でしょうか？
全てのファイルに有ります。
削除しても問題無く動きますが必要でしょうか？
何度もすみません。
投稿： koji | 2008.07.24 20:18
kojiさん、コメントありがとうございます。
_notesファイルは、Dreamweaver（ウチで使っているのはver8です）で勝手に作ってしまうファイルです。
※「勝手に」と書きましたが、ちゃんとした使い道はあります。
なので、削除してもらって全然構いません。
（おそらく、_notesで検索をかければ、どういうモノなのか分かるハズなんですが…）
プルダウンメニュー（ドロップダウンメニュー）を作るのは良いのですが、その前に基本的なWebの知識、htmlやCSSの作り方を勉強してからの方が理解できると思います。
とかくWebの世界は流れが速いので、付け焼き刃ではすぐ着いていけなくなります。
遠回りに思うかもしれないですが、基礎から地道に勉強していく方が必ず力になります。
頑張ってみてください。
投稿： exyz | 2008.07.24 21:44
こんにちは。
いろいろとありがとうございます。
早く作りたく、気ばかりが焦ってました。
確かに、基礎を知らずに作っても
トラブルがあった場合、解決する事も出来ないですね。
頑張ります。
投稿： koji | 2008.07.25 07:31
初めまして。
以前、投稿された方と同じ質問なのですが、
ロールオーバー用の画像で、「_o」とついてる
ものの指定の仕方がどうしても分かりません。
私にも教えて頂ければと思います。。
宜しくお願い致します。
投稿： pin | 2008.08.02 11:43
pinさん、コメントありがとうございます。
jsフォルダの中にあるnavi.jsというJavaScriptで制御します。
このブログのコメント覧では、htmlタグを受け付けていないので、詳しい設定方法はメール致します。
しばらくお待ち下さい。
投稿： exyz | 2008.08.02 12:04
なんとかできました。とても助かりました。
丁寧に教えて戴き、どうもありがとうございました！
投稿： pin | 2008.08.07 09:22
こんにちは。
なんとか作る事が出来ました。
大変、助かりました。
質問なんですが、
body onload="initRolloversをbody以外に
指定出来ますか？
色々、試したのですがエラーになってしまいます。
何か方法が有れば、教えて頂ければと思います。
宜しくお願いします。
投稿： koji | 2008.08.13 09:23
kojiさん、コメントありがとうございます。
ご質問の件ですが、
navi.jsに下記のスクリプトを追加すれば、htmlには何も記述しなくても良くなります。
try{
window.addEventListener("load",initRollovers,false);
}catch(e){
window.attachEvent("onload",initRollovers);
}
ちなみにですが、この方法を使うと、他に body onload を設定するJavaScriptがある場合でも併用して使用できるようになります。
投稿： exyz | 2008.08.13 09:52
こんにちは。
お礼の返事が遅くなり申し訳ございませんでした。
うまく動くようになりました。
わかりやすく、丁寧に教えていただき、
色々、有難ういございました。
投稿： koji | 2008.08.30 07:45
kojiさん、コメントありがとうございます。
プログラムを勉強した人間ではないので、JavaScriptの中身まではよく分かっていないのですが、何とかお役に立てたようで良かったです。
投稿： exyz | 2008.08.30 17:42
こんにちは。はじめまして。
プルダウンのロールオーバーが出来る素敵なメニューを見つけたので、是非使わせて頂こうと思いました。
画像が入っているimgフォルダ名を変更すると、ロールオーバーをしなくなってしまいました・・・。
navi.jsの17行目のカッコ内のタグを変更したのですが、他に変更しないといけない部分がどうしても分かりません。
申し訳ないのですが、教えていただけないでしょうか？
よろしくお願いいたします。
投稿： rio | 2008.10.27 12:49
rioさん、コメントありがとうございます。
ただ、コメントを読んだだけではどういう症状かわかりません。
申し訳ないですが、各動作を表す用語の使い方が間違っているように思います。
このサンプルは、
メインメニュー（第１階層）をロールオーバー（カーソルを重ねる）するコトによって、サブメニュー（第２階層）がプルダウン（下に引き出されて）して表示されます。
また、ロールオーバー（カーソルを重ねる）時に、画像を差し変えて表示するコトも出来ます。
…といった動作が出来ます。
> ロールオーバーをしなくなってしまいました
というのは、どういうコトでしょうか？
ロールオーバーでプルダウンメニューが表示しなくなったのか、ロールオーバー時に画像の差し替えが出来なくなったのか、どちらでしょうか？
また、navi.jsの17行目は階層のパスではなく、img要素を定義しているので、元に戻して下さい。
投稿： exyz | 2008.10.27 13:16
お返事ありがとうございます。
>ロールオーバーをしなくなってしまいました。
これについてですが、プルダウンメニューは表示されるのですが、サブメニュー上にマウスを持ってきても色違いで用意した画像が表示されないという状態です。
分かりにくい文章ですいません。
投稿： rio | 2008.10.27 13:38
rioさん、コメントありがとうございます。
ロールオーバー時の画像の差し替えは、navi.jsで行っています。
２つ原因が考えられます。
１）元画像と同じフォルダ内に差し替え画像も入れてありますか？
また、画像名も（元画像名）_o.gifのように、元画像名の後に「_o」を付けてありますか？
２）htmlの19行目のように、
body onload="initRollovers();" となっていますか？
以上をクリアしていれば、正しく動作するハズなんですが…。
※navi.jsの17行目は、
var aImages = document.getElementsByTagName('img');
に戻しておいて下さい。
投稿： exyz | 2008.10.27 16:24
動くようになりました！
大変分かりやすい説明で、お返事も早く頂けて大変助かりました。
色々ありがとうございました。
投稿： rio | 2008.10.27 16:49
こんにちは！はじめまして
このメニューを参考にプルダウンメニューが作成できました
ありがとうございました。
そこで質問があるのですが
プルダウンのメニューをクリックした際にBODYの部分？
（例ですと「JavaScriptとcssを読み込めば・・・」と書いてあるところです)
をクリックした内容に書き換えることはできないでしょうか？
あの枠内に別HTMLを表示させるようなイメージなのですが・・・
もしご存知でしたらご教授いただければと思います
よろしくお願いします
投稿： あに | 2008.10.30 23:31
あにさん、コメントありがとうございます。
ご質問の件ですが、無難にページごと書き換えるのではダメなのでしょうか？
メニュー部分は、（Dreamweaverなら）ライブラリにしておけば、管理が楽ですし。
１ページ内にすべての要素を記述してタブ（あるいはボタン）で表示範囲を変えるのであれば、他のAlaxを使った方が良いと思います。
例えば…）
http://exyz.cocolog-nifty.com/good_sleep/2007/12/post_0b1d.html
まず、どういう仕組みを作りたいという所を考慮して、それにはどんなインターフェイスを作り、どのAjaxライブラリを利用するのか考えないといけないと思いますよ。
投稿： exyz | 2008.10.31 11:18
はじめまして。
質問をさせていただきます。
ロールオーバー時、サブメニューを下では無く上に出したい際はどうすれば良いですか？
お教え頂けるとうれしいです。
宜しくお願いいたします。
投稿： なか | 2008.11.04 10:01
なかさん、コメントありがとうございます。
このサンプルでは、サブメニューを上に出すというのは難しいと思います。
他のAjaxライブラリを使って出来ない事もないとは思いますが、Flashを使ったインターフェイスが妥当なのではないでしょうか？
コンテンツ下部にメニューがあり、マウスオーバーでサブメニューが上に出るという仕組みでは、小さい表示範囲でアクセスしているユーザーにとって、かなり不便なインターフェイスになると思います。
Flashで表示範囲を固定するか、ブラウザの表示範囲にコンテンツ自体が広がるような仕組みが良いと思いますよ。
いかがでしょうか？
投稿： exyz | 2008.11.04 10:39
早速のご回答、ありがとうございます！
やはりFlashで作った方が。。とは思ったのですが、第2階層以降はサンプル同様のドロップダウンメニュー、トップページはメイン画像下のナビゲーションから上へサブメニュー掲出という構成だったので、下層に合わせてトップもできたらいいな、、、と考えたもので。。
ご指摘頂いたように、Flashでの製作を提案してみます。本当にありがとうございました。
画像を使った半透明の上へ出るドロップダウンメニューのサンプルってどこかに無いのでしょうかね。。
投稿： なか | 2008.11.04 11:22
なかさん、コメントありがとうございます。
htmlの記述の順序があるので、サブメニューを上に出すというのは、なかなか難しいと思います。
まだ、こちらのサンプルだとポジションに融通が利くので出来ない事もないとは思いますが…。
http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_8537.html
ただし、サブメニューのそれぞれの列は高さを揃える必要があったり、ブラウザによってバグが出たり…、思い通りインターフェイスにするにはなかなか苦労すると思います。
Flashの設置が可能であれば、そちらの方が良いと思いますよ。
投稿： exyz | 2008.11.04 17:28
お返事遅くなってすみません。
やはり色々考えてみたのですが、難しいですよね。。ご丁寧にお答え頂いて本当にありがとうございました！フラッシュで作成する方向で動き始めました。ありがとうございました。
投稿： なか | 2008.11.10 10:18
なかさん、コメントありがとうございます。
Flashを使わず、プルアップメニューを作るのは、かなり苦労すると思います。
トップページ限定という事であれば、Flashで作るのが妥当だと思いますよ。
swfobject.jsというJavaScriptを使えば、Flash Playerが対応していない環境でも代替表示できますし、その代替表示エリアで、セカンドページ以降のインターフェイスを取り込んであげれば、アクセシビリティも十分だと思います。
ご参考まで。
http://exyz.cocolog-nifty.com/good_sleep/2007/06/flash_javascrip_a593.html
投稿： exyz | 2008.11.10 10:57
はじめまして、DropDownMenuを使ってメニューを作成中の者です！
お陰様で画像を使ってメニューを作ることが出来たのですが、
サブメニュー項目を横並びにしたい時はどういじれば良いのでしょうか？？
以前、画像が使えないポップアップメニューで作ってみた時は、
出てきたsubメニューにマウスオーバーで、
横にさらにsubメニューが出てくる様に出来ていたのですが。。
今回どの様にしてよいか分からず、ご教授願いたいです！
どうぞよろしくお願いいたします！
投稿： ken | 2008.12.09 11:36
kenさん、コメントありがとうございます。
サブメニューを単に横並びにしたいだけでしたら、
DropDownMenu.cssの.submenu aにfloat: left;を追加すればできると思います。
ただ、その下にもう１つメニューを追加するのは、このサンプルでは厳しいと思います。
階層をいくつも作るのであれば、下記のページのサンプル等を改良した方が早いと思いますよ。
http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_8537.html
投稿： exyz | 2008.12.09 12:28
exyz様！
横に出したいだけなので、さっそくやってみます！
ありがとうございます！！！！
投稿： ken | 2008.12.10 14:21
何度もすみません、、
まだサブメニューを横並びに出来ずにいるのですが、
本当に単にDropDownMenuのcssに
submenu a {
float: left;
display: block;
/*font: 11px arial;*/
text-align: left;
/*text-decoration: none;
padding: 5px;
color: #2875DE;*/
}
と追加しただけなのですが、これだけで良かったのでしょうか？？
無知ですみません、、どうぞ宜しくお願いいたします！
投稿： ken | 2008.12.10 14:39
また、spryメニューのサブメニューの右に出てくるサブメニューに、
更に右に出てくるサブメニューを増やしたい場合、
どういじれば良いのでしょうか？？
併せてご教授お願いしたいです！
どうぞよろしくお願いいたします！！
投稿： ken | 2008.12.10 15:50
kenさん、コメントありがとうございます。
まず、
> サブメニュー項目を横並びに…
とありますが、
１）メインメニュー（第１階層）の下にサブメニュー（第２階層）を横並びに表示するという事ではないんでしょうか？
２）メインメニュー（第１階層）の横にサブメニュー（第２階層）を表示させるという事でしたら、今回の修正では間に合いません。
１の場合であれば、上手くいくハズですが、元のサンプルから、どれくらいカスタマイズされたのでしょうか？
その状況が分かりませんので、答えようがありません。
また、
> spryメニューのサブメニューの右に…
とあり、厳しい事を言いますが…、
もっとご自分で勉強された方が良いと思います。世の中には優れたサンプルが色々とあります。ソースコードを眺めて、分からなければ、参考書やWeb系の雑誌を読むなりして研究してみて下さい。
そうしないと、いつまで経っても何も分からないままです。
投稿： exyz | 2008.12.10 16:57
サブメニュー項目を横並びに…と言うのは、
１）の、メインメニュー（第１階層）の下に出てくるサブメニュー（第２階層）
の３項目を横並びに表示するという事でした。
元のサンプルから、画像・リンク先を入れ替えて、
メインメニューの項目数を６つにした状態なのですが。。
そうですね、もっと自分で研究して頑張ってみます！
今夜が期限だったもので、他力本願全開で申し訳ありませんでした！
投稿： ken | 2008.12.10 17:17
kenさん、コメントありがとうございます。
ご質問の件ですが、WindowsのIE6で確認してみると、確かに横並びになりませんでした。
申し訳ございません。
直したファイルを記述されたメールアドレスにお送りしましたので、ご確認ください。
※DropDownMenuの.submenuにwidth: 800px;を
追加しています。
（サブメニューを横並びにして入り切るサイズに幅を設定）
投稿： exyz | 2008.12.10 18:14
返事が大変遅くなりまして、すみません！
ご丁寧なメールまで本当にありがとうございました！！
無事サブメニューを横並びにできました、、
横並びになってくれた時は、感動さえ覚えました。。
無知な質問にご親切な対応、どうもありがとうございました！！
投稿： ken | 2008.12.13 01:02
DropDownMenuを利用させていただいています。
メニューを作り、Firefox3.0にて動作確認をしたところ、
プルダウンメニューから別ページへリンクした後、
ブラウザの戻るボタンで前のページに戻ると
ボタンがロールオーバーしたままになってしまいます。
この回避方法はあるのでしょうか？
回避方法があれば教えていただきたいと思います。
よろしくお願いいたします。
投稿： ja | 2009.01.08 15:41
jaさん、コメントありがとうございます。
ウチの環境で検証してみましたが、どのブラウザで行っても、ブラウザの戻るボタンで前のページに戻っても、そのような状態にはなりません。
もしそうなるとしても、ブラウザの仕様だと思います。再描画しないとロールオーバーの状態を保っている可能性もあるでしょう。
その場合は申し訳ないですが、僕では分かりかねますので、他に解決策がないかお探しいただけませんか？
…お役に立てず申し訳ございません。
投稿： exyz | 2009.01.08 17:50
ご確認ありがとうございました。
Flash上にプルダウンメニューを重ねるプログラムをダウンロードして再度設定をしてみたところ、そのような現象は起きませんでした。
そちらのプログラムを利用させていただきます。
完全な解決策ではありませんでしたが、自分ではOKとします。
お騒がせ致しました。
投稿： ja | 2009.01.08 18:30
jaさん、コメントありがとうございます。
こちらでも時間のあるときに詳しく調べてみます。
ご指摘ありがとうございました。
投稿： exyz | 2009.01.08 21:47
はじめまして。
私は今会社のHPを作成しています。
ページのメニュー部分にプルダウンメニューを
取り入れる事になりました。
こちらのサンプルを使用させて頂こうと
思っています。
ある程度本なども揃えて、作成出来る状況には
なったのですが、大して知識があるわけでもなく
行き詰まっています･･･。
質問があるのですが、画像の大きさを変えて
みたのですが、プレビューで確認すると
画像が重なってしまいます。
どうすればいいのでしょうか??
投稿： myumyu | 2009.04.10 13:16
myumyuさん、コメントありがとうございます。
画像が重なるというのは、横に重なるんでしょうか？
だとすれば、CSSの幅の設定も変更しなければいけません。…どこを変更すれば良いか分かりますか？
サンプルで言うと、
１）DropDownMenu.cssの#dd .mainmenu a.menuのwidthを実際の画像の幅に変更して、
２）それに併せてstyle.cssの#wrapperのwidthを各メニューの幅を合計した値に変更して下さい。
コーディング全般を基礎から勉強しないと、なかなか思い通りには作れません。
正しいマークアップの仕方とCSSの設定方法を勉強してみて下さい。
投稿： exyz | 2009.04.10 15:37
早速お返事頂きありがとうございました。
今試してみたところ
上手くいきました!!ありがとうございます。
今からサブメニューの変更もしていきます。
サブメニューの方も同じように変更
すればよいのでしょうか??
投稿： myumyu | 2009.04.10 16:58
立て続けにすいません。
ボタンの数を５つに増やしたのですが、何故か
４つ目と５つ目のボタンだけプルダウン
してくれません。
どこを変更すればよいのでしょうか??
投稿： myumyu | 2009.04.10 17:56
myumyuさん、コメントありがとうございます。
厳しいコトを言いますが、プルダウンメニューを作るには、まだまだ知識と技術が不足していると思います。
本を揃えただけではダメです。もう少し基礎を良く勉強して下さい。
また、このブログは、単に自分が便利だと思ったサンプルを紹介しているだけで、手取り足取り教えられる訳ではないコトをご了承ください。
HTMLソースを良く見ると、一定の法則が見えてくるはずです。
例えば、３番目のメニューなら、
メイン階層が
class="menu" id="mmenu3" onMouseOver="mopen(3);"
サブメニュー部分が
class="submenu" id="menu3"
…となっているハズです。
このid="mmenu3"やmopen(3)、id="menu3"が関係あるのでは？と、気づかないですか？
それらを該当する数字に変えて下さい。
投稿： exyz | 2009.04.10 19:21
お返事ありがとうございます。
全く知識が無いわけではなく、一応高校では
プログラミングを勉強していたので
出来るかな･･･と思って挑戦してみたのですが･･･。
cssやjsに関しては大した勉強をしていないので
私の元々の知識では少し難しかったようです。
class="menu" id="mmenu3" onMouseOver="mopen(3);"
↑こちらは該当する数字に変更していたのですが
class="submenu" id="menu3"
↑こちらを見落としていました。
色々とご丁寧に教えて頂いて本当に
ありがとうございました。
おかげさまで理想のメニューを作る事が
出来ました。
これからもっと日々少しずつ勉強して
自分で解決出来るように精進していきます。
本当にありがとうございました。
投稿： myumyu | 2009.04.11 09:35
myumyuさん、コメントありがとうございます。
プログラムを勉強をされたのなら、cssやjsは簡単だと思います。
僕なんかは全くの素人ですので、そのうち足下にも及ばなくなると思いますよ。
是非基本から勉強してみて下さい。
投稿： exyz | 2009.04.11 10:45
最後にもう１つだけ教えて頂いても
よろしいでしょうか･･･。
作成したＨＰ内にボタンを設置すると
全部が中央表示になったり、ボタンがプルダウンせずに
横１列に表示されたりするのですが、それは
何故なんでしょうか??
設置したい位置に表示出来ないのですが･･･。
投稿： myumyu | 2009.04.11 11:00
何度もすいません。
プログラムを書く位置を間違えていました。
ちゃんと表示されるようになりました。
ありがとうございました。
いいＨＰが出来そうです。
投稿： myumyu | 2009.04.11 11:42
大変ありがたいサンプルで、早速使わせていただいております。
設置は出来てほぼ完成しているのですが、一つだけどうやってもできないものがあります。
http://www.mos.co.jp/index.php
このサイトのプルダウンメニューのように、プルダウン（submenu）にカーソルがある場合、mainmenuの「img_menu01_o.gif」の画像のまま表示させたいのですが、どうしてもできません。
今の状態はsubmenuにカーソルがある場合は「img_menu01.gif」に戻ってしまいます。
ご教授いただけないでしょうか？
宜しくお願い致します。
投稿： soran | 2009.05.05 02:00
soranさん、コメントありがとうございます。
このサンプルでは、jsフォルダ内のnavi.jsを使いロールオーバー時に画像を差し替えています。
その辺りは理解されていますでしょうか？
効率の良さやページの整合性を求めるのなら、JavascriptやCSSを用いて、カレント表記するのが良いとは思いますが、ある程度の経験値が必要です。
簡単に行うならば、
そのページに該当する第一階層のメニュー画像をロールオーバー時のモノ（例えば、img_menu01_o.gif）に変えて、 その画像に記述されている「class="imgover"」を削除して下さい。
ただし、手作業で各ページを修正しなければいけないので、多少手間がかかります。
投稿： exyz | 2009.05.05 11:47
こんにちは。はじめまして。
画像バージョンのプルダウンメニューを探していて、こちらに辿り着きました。まさに欲しかったもので、すごく嬉しいです！
でも、何人かの人もおっしゃっていますが、ロールオーバー効果の設定の仕方が分かりません。。
教えていただたら光栄です。
よろしくお願い致します。
投稿： 8shit | 2009.06.18 16:38
8shitさん、コメントありがとうございます。
ロールオーバー効果は、navi.jsで処理しています。
該当する画像に「_o」を付けて、同じフォルダに置きます。
（例えば、元がimg_menu01.gifなら、img_menu01_o.gifを追加）
そして、該当する画像ソースに「class="imgover"」を記述して下さい。
そうすれば、navi.jsが作用して、img_menu01.gifをロールオーバーすると、img_menu01_o.gifに差し替える仕組みです。
ソースコードを良く見てもらえれば、分かると思いますよ。
投稿： exyz | 2009.06.18 22:09
お返事ありがとうございます！
分かりました！！
こんな初歩的なこと聞いてしまって、どうもすみませんです。
貴重な技術をこうやって公開していただけていること、感謝します。これからも期待しています★
投稿： 8shit | 2009.06.19 09:44
職場のサイトをリニューアルするということでAdobe DreamweaverCS3でspryを使ってメニューを作ったのですがwindowsのIE7で見るとサブメニューが全部左側に出てしまうのです。cssを色々触ったのですが変わりません。
もうお手上げなんです。
それで色々検索したらこのサイトを見つけることができました。厚かましいお願いですが、対策があれば教えていただきたいです。
お返事をいただきましたらURLを送らせていただきます。
環境はIntel Mac OSX10.4.11です。
よろしくお願いします。
投稿： koyume | 2009.08.25 11:56
koyumeさん、コメントありがとうございます。
CSS（場合によっては、Javascriptも…）の中身を見ないと何とも言えませんし、このサンプルとspryでは、作り方が違います。
spryを使ったプルダウンメニューは、下記のエントリーで紹介していますので、まずは参考にしてみて下さい。
http://exyz.cocolog-nifty.com/good_sleep/2007/12/javascript_8537.html
また、このブログは、自分の覚え書きのような物ですので、基本的にご質問等は受け付けておりません。
ご自身で解決くださればと思います。ご健闘下さい。
投稿： exyz | 2009.08.25 18:43
解決しました！
cssの一部を書き換えたらできました。
お騒がせしました〜
投稿： koyume | 2009.09.03 01:23