グローバルメニュー プルダウン？化及びロールオーバー化

質問

はじめまして。誰か助けて下さい、今困っています(＞＜)

初めての投稿ですのでもし、わかりづらい文章で不快な思いをさせてしまいましたらすいません。ですが皆さんの知識をお借りしたく質問させて貰いました。

質問の内容ですが、今サイトを作成している最中なのですがTOPメニューの作成でつまずいてしまいました。

DREAMWEABERで作成しているのですが、その中にある機能Spryメニューバーでそれらしいものは作成できるのですが私の作りたい物が出来ません(>_<)

参考イメージは下記のトヨタのサイトです。
http://toyota.jp/

このサイトのようにメニューにマウスを乗せたらbackground-imageも切り替わりつつ下にサブメニューがでるようにしたいのですが、
サイトが複雑＆Javascriptが知識が非常に薄く理解出来ませんでした。CSSはレイアウトしたりするかじった程度です。

どなたか優しく教えて貰えると嬉しいです。あとコードも添えて貰えると非常に助かります。
ご無理を言って申し訳ないですがよろしくお願い致します。

回答No.2

fujillin

こんにちは

＞ロールーオーバ化が良く分かりませんでした(＞＜)
意味しているところがよくわかりませんが、

＞マウスを乗せたらbackground-imageも切り替わりつつ下に
＞サブメニューがでるようにしたいのですが
を意味しているのでしょうか？

例えば↑例の2番目のものはＣＳＳで background-colorを変えていますが、このタイミングで background-imageを変えればimageで同じことが可能です。
javascriptで実現しているタイプのものも基本的には同じで、mouseoverのイベント処理のなかでimageなりcolorを変えていますので、そこをお好みに合うようにすればよろしいかと。

回答No.1

fujillin

スクリプトベースでやるなら、「javascript ドロップダウンメニュー」あたりを
キーに検索すれば、それこそごまんと見つかります。

シンプルな短いものから、ライブラリーを利用した複雑なものまで。
そのあたりから、好きなものを選んでくればよいでしょう。
（コードも配布されていますし、設置方法も説明されています）

＜以下は例として＞
　http://jsajax.com/DropDownMenuArticle286.aspx
　http://www.stylish-style.com/csstec/ultimate/css-roll-1.html
　http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
　http://deluxe-menu.com/?gclid=CLKTyZWP6pgCFQjXbgodSQhX0w
　http://gigazine.net/index.php?/news/comments/20060724_css_adxmenu/
　http://gigazine.net/index.php?/news/comments/20060724_css_adxmenu/
　http://andyou.sakura.ne.jp/tool/ddmenu.html

お礼

ご返答有難う御座いました。
大変参考になりましたｍ(＞＜)ｍ

あと申し訳ないんですがもうひとつのロールーオーバ化が良く分かりませんでした(＞＜)

参考に読ませてもらったサイトや検索して自分なりにまた調べて見たのですがドロップダウンメニューにさらに自分の作成したボタンを使用しマウスを乗せた時にその画像も変わるようにしたいのですが他にも参考になるサイトはないでしょうか？画像は一番上？の階層だけに対応できればいいのですが。

大変申し訳ないですがよろしくお願い致します。