- ベストアンサー
ナビゲーションバーからプルダウンメニューをゆっくり表示させる方法。
以下のようなナビゲーションを作ってみました。 使用したのはfireworksCS4です。 http://www.geocities.jp/de_chirico_1911/ page2の上にマウスポインタを置くとサブメニューが出ます。 このサブメニューが上から下にスルスルと降りてくるようなサイトをよく見かけるのですが、↑のアドレスの状態に何か書き加えてどうにかなる問題ではないのでしょうか? お分かりの方、いらっしゃいましたらよろしくお願いします。
- riko421
- お礼率75% (62/82)
- ホームページ作成ソフト
- 回答数4
- ありがとう数6
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
作業手順のアドバイスです。 1.先ずjQueryより(http://jquery.com/)のjsファイルをダウンロード 2.No.1さんが仰ったページのソースを参考に現在テーブルで構成しているメニューをCSSとリストタグで構成。 (画像やボタン領域はCSSで設定) 3.サブメニューの落下スピード先ほどのページの末尾にある ‘Example with custom speed:’の({speed: 100})をカスタム。 勿論jsが理解できているなら、このソースの部分をDLしたjQueryのjsファイルの末尾に記載。 でいかがでしょうか?
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
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にも書きましたが)ご提示の参考サイトに合せて全体を組み替えるのが近道かと思います。 (実質的には表示内容を入れ替えるだけなので、たいした手間はかからないでしょう)
お礼
ありがとうございます。解析していただいたおかげでヒントがつかめました。
- salonpath
- ベストアンサー率48% (194/399)
参考ページに書いてある実装のさせ方をベースに書き直しが必要ですね。 htmlやcssを理解していないと難しいと思います。
補足
上記のサイトはhtmlとcssで作成したつもりですが…。
- salonpath
- ベストアンサー率48% (194/399)
>スルスルと降りてくるようなサイトをよく見かける そのよく見かけるサイトのうち、理想に近い動きをするサイトのアドレスを教えてください。
補足
ご質問ありがとうございます。 http://onehackoranother.com/projects/jquery/droppy/ このような感じです。
関連するQ&A
- 重なるプルダウンメニュー
ホームページでマウスポインタを合わせると、 下にひらひらと出てくるMENUを作りたいのです。 それも、下の画面に重なって出てきてほしいのです。 http://www.i-love-epson.co.jp/ このホームページのようなメニューです。 無料のFlashとかでも試してみたんですが、 うまくいきません。 どうしたらできますか? また、このようなメニューを配布しているところがあれば、教えてください。
- ベストアンサー
- ホームページ作成ソフト
- ナビゲーションバー、オンマウスでゆっくりとメニューが現れるもの
ナビゲーションバーのボタンの上にマウスを置くと、ゆっくりとメニューが下りてくるタイプの作成方法が分からなくて質問させていただきました。 dreamweverCS4やfireworksCS4などで機能自体は同じものはできるのですが“ゆっくりと”下りてくるようにはならないんです。 ナビゲーションバーではありませんが、Spryで作成したものにそのような動きがありますので、Spryを利用するのでしょうか? dreamweverやfireworksで設定する方法はなく、手打ちで対応するのしかないのかもしれませんが、ぜひ、作ってみたいです。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- プルダウンメニュー教えてください。
プルダウンメニューを作成しようとしていますが、望みのものが見つかりません。 欲しいプルダウンメニューは、 ・画像の上にポインタを置いたら、下に同じ幅でメニューが表示される。 ・そのメニューは画像ではなく、テキストによるメニュー。透過されており、不透明度を調整できる。 ・各メニューは横線で区切られており、ポインタを下に滑らすとポインタのある枠(ボックス)の背景色と文字色が変わる。 ・対応ブラウザは、IE6以上、FF、Chrome。 こういったプルダウンメニューを探しています。ネットで探せば、Java ScriptやCSSが たくさん紹介されているのですが、ぴったりのものが見つかりません。 もしご存知でしたら、教えていただけますでしょうか? よろしくお願いします。
- ベストアンサー
- CSS
- javascriptでなめらかなプルダウンメニューを
javascriptを使ってFlashで作成したようななめらかな動きをするプルダウンメニューを 作成するのは出来るのでしょうか。 色々と調べてはいるのですが、下記サイトのサンプルのように クリックして直ぐにサブメニューが表示される、という方法は見つけられても 滑らかな動きを実現できる方法が見つかりません。 http://javascript.eweb-design.com/sample/s0701_1.html イメージとしては、 1.メニューをクリック 2.1秒後に上からズルズルっとサブメニューが表示される 3.メニューからマウスが離す 4.1秒後にズルズルっとサブメニューが上に戻る うまい表現方法が見つからず分りづらい質問となってしまいましたが アドバイスをいただけると助かります。宜しくお願いします。
- 締切済み
- JavaScript
- カスケードメニューが表示できなくなりました
ある日突然カスケードメニューが表示できなくなりました。 一例として「スタート」をクリックして右向きの▼印のある「すべてのプログラム」にマウスポインタを合わせるとサブメニューがズラズラズラーと表示されていました。ある時期からマウスポインタを合わせてもそれが表示されなくなりました。 その状態で左クリックすると勿論通常にサブメニューを表示するので、1クリック動作が増えて面倒くさいだけで、極端な実害はないのですが、いちいちクリックしなければならないのでいらいらします。元のように復旧する方法はないでしょうか?
- ベストアンサー
- Windows XP
- menuの表示
質問です。 以下の例1のような左右に分かれたページで、「サービスガイド」をクリックすると、その下のメニューが下に移動して、その間にサブメニューが表示され、さらにマウスが移動したら、そのサブメニューが閉じて、元に戻るようなスクリプトを探しています。そのようなスクリプトってないでしょうか? ご存知の方、よろしくお願いいたします。 例1 http://www.starcat.ne.jp/mediacat/
- ベストアンサー
- JavaScript
- グローバルメニュー プルダウン?化及びロールオーバー化
はじめまして。誰か助けて下さい、今困っています(><) 初めての投稿ですのでもし、わかりづらい文章で不快な思いをさせてしまいましたらすいません。ですが皆さんの知識をお借りしたく質問させて貰いました。 質問の内容ですが、今サイトを作成している最中なのですがTOPメニューの作成でつまずいてしまいました。 DREAMWEABERで作成しているのですが、その中にある機能Spryメニューバーでそれらしいものは作成できるのですが私の作りたい物が出来ません(>_<) 参考イメージは下記のトヨタのサイトです。 http://toyota.jp/ このサイトのようにメニューにマウスを乗せたらbackground-imageも切り替わりつつ下にサブメニューがでるようにしたいのですが、 サイトが複雑&Javascriptが知識が非常に薄く理解出来ませんでした。CSSはレイアウトしたりするかじった程度です。 どなたか優しく教えて貰えると嬉しいです。あとコードも添えて貰えると非常に助かります。 ご無理を言って申し訳ないですがよろしくお願い致します。
- 締切済み
- JavaScript
- プルダウンメニューについて
知人から頼まれホームページを作成しています。 javascriptでプルダウンメニューと打ち出し画像の両方を使うとうまく表示されません。 グローバルナビゲーション(プルダウンメニュー)のすぐ下に打ち出し画像がくるレイアウトになります。 打ち出し画像が邪魔をしてプルダウンのサブメニューが表示されません。 【プルダウンメニュー】 http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html 【打ち出し画像】 http://jonraasch.com/blog/a-simple-jquery-slideshow 上記の2つを組み合わせ、プルダウンの伸びたメニューが打ち出し画像に重なり、動かすことは可能でしょうか? HTMLとCSSの知識はありますが、プログラムの知識はありません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ナビゲーションバーが動かない?
以下のようなサイトをdreamweaverCS4で作りました。 http://www.geocities.jp/de_chirico_1911/navi_futyou 左側にメインのナビげーション、右側にサブナビゲーションを付けてナビゲーションの間の画像を入れ替えようとしています。 リンク自体は有効になるのですが、オンマウスで文字が光るようにしたはずなのに光らなくなっています。 ナビゲーションバー単独でアップロードすると光るので、ナビゲーションバーそのものに問題あるわけではなさそうです。 配置が悪いのでしょうか? 以前、ナビゲーションバーの右と左を入れ替えたものを作ったときは問題なく作動しました。 お分かりになる方、いらっしゃいましたら教えていただけませんか?
- ベストアンサー
- ホームページ作成ソフト
- プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 ●メニュー1-1 ●メニュー1-2 ●メニュー1-3 ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか? 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか? 以下がコードの一部です。 [html] <div class="tree"> <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> <div class="tree_sub"> <ul> <li class="left">●メニュー1-1</li> <li>●メニュー1-2</li> </ul> <ul> <li class="left">●メニュー1-3</li> <li>●メニュー1-4</li> </ul> </div> </div> <div class="tree"> <a href="#">○メニュー2</a> </div> [css] div.tree { border-bottom:1px solid #000000; width:365px; } div.tree_sub ul li { float:left; } div.tree_sub ul li.left { width:50%; }
- ベストアンサー
- その他(プログラミング・開発)
お礼
うまく出来ました^^。
補足
ありがとうございます!!さっそく試してみます。