ナビゲーションバーからプルダウンメニューをゆっくり表示させる方法。

質問

以下のようなナビゲーションを作ってみました。
使用したのはfireworksCS4です。
http://www.geocities.jp/de_chirico_1911/
page2の上にマウスポインタを置くとサブメニューが出ます。
このサブメニューが上から下にスルスルと降りてくるようなサイトをよく見かけるのですが、↑のアドレスの状態に何か書き加えてどうにかなる問題ではないのでしょうか？
お分かりの方、いらっしゃいましたらよろしくお願いします。

回答No.4

smooth_operator · ベストアンサー

作業手順のアドバイスです。

１．先ずjQueryより(http://jquery.com/)のjsファイルをダウンロード

２．No.1さんが仰ったページのソースを参考に現在テーブルで構成しているメニューをCSSとリストタグで構成。
（画像やボタン領域はCSSで設定)

３．サブメニューの落下スピード先ほどのページの末尾にある
‘Example with custom speed:’の({speed: 100})をカスタム。
勿論jsが理解できているなら、このソースの部分をDLしたjQueryのjsファイルの末尾に記載。

でいかがでしょうか？

お礼

うまく出来ました＾＾。

補足

ありがとうございます！！さっそく試してみます。

回答No.3

fujillin

http://oshiete1.goo.ne.jp/qa5809240.html
↑と同じ質問でしょうか？

やっとソースがわかりましたが、まったくの予想外のものでした。
多分、ソフトが吐き出したソースとスクリプト、CSSだと思われますが、追跡するのがとても面倒。（なので、解析はしていません）
解析するよりも新しく作っちゃうか、参考サイトに合せて書き直すほうが遥かに速そうですね。

ざっと現在のソースを見てみると…
・表以外のものはtableでなく、CSSでレイアウトするように推奨されているはず。
・メニューのimgサイズが（幅）182pxだったり、181pxだったり？
　基本的には1箇所に対して2種類の画像で済みそうですが、4種類もあるのはなぜ？
・メインメニューの間隔が8pxだったり、6px、5pxなどとまちまちなのは意図的？
・サイズ調整のためのspacerもCSSで指定すれば不要になります。
　また、そのために不要なテーブルセルが作成されている。
・親要素（メインメニュー）に対して、サブメニュー、孫メニュー（←ご提示のもの
　にはないけれど）などが、構造として関連している記述方法が望ましい。
　（ご提示のものは、idで関係付けているだけなので、構造としては別物）
・HTMLには文書の内容と構造を記述し、レイアウトやスタイルはCSSでという
　のがCSSの本来の趣旨。
　（ご提示のソースはCSSは使用しているものの、属性指定でのスタイル設定が
　　混在しているので、わかりにくい）
・個々の要素にスクリプトのイベント設定をしているので、ソースが長く、またidが
　多く付いている。（しかも、ソフトが付けているので、番号化されてわかりにくい。）
　（ご提示の参考サイトのように、親のulにidを付けるだけで済みますし、
　　onmouseoverなどのイベントも個々の要素に設定する必要はありません。）

などなどを考え合わせると、（Q5809240にも書きましたが）ご提示の参考サイトに合せて全体を組み替えるのが近道かと思います。
（実質的には表示内容を入れ替えるだけなので、たいした手間はかからないでしょう）

お礼

ありがとうございます。解析していただいたおかげでヒントがつかめました。

回答No.2

salonpath

参考ページに書いてある実装のさせ方をベースに書き直しが必要ですね。
htmlやcssを理解していないと難しいと思います。

補足

上記のサイトはhtmlとcssで作成したつもりですが…。

回答No.1

salonpath

>スルスルと降りてくるようなサイトをよく見かける
そのよく見かけるサイトのうち、理想に近い動きをするサイトのアドレスを教えてください。

補足

ご質問ありがとうございます。
http://onehackoranother.com/projects/jquery/droppy/
このような感じです。