ゆっくりと出るプルダウンを作成する方法

このQ&Aのポイント
  • ゆっくりと出るプルダウンを作成する方法について調査しました。クリックではなくオンマウスでプルダウンが出るようにするためにはJavaScriptのカスタマイズが必要ですが、素人でも簡単に実装することができます。
  • ゆっくりと出るプルダウンを作成する方法について調査しました。JavaScriptのカスタマイズを行うことで、プルダウンの表示をクリックからオンマウスに変えることができます。具体的な手順を解説します。
  • ゆっくりと出るプルダウンを作成する方法について調査しました。プルダウンの表示をオンマウスに変えるためには、JavaScriptを使用して要素のイベントを制御する必要があります。簡単なコード例も紹介します。
回答を見る
  • ベストアンサー

ゆっくりと出るプルダウンを作りたいのですが、

ゆっくりと出るプルダウンを作りたいのですが、 メニューからプルダウンがゆっくり出るwebページを作ろうと、 http://onehackoranother.com/projects/jquery/droppy/ よりソースをコピペして、一応は作ることが出来ました。 ただ、出来ればクリックしてプルダウンが出るのではなく オンマウスでプルダウンが出るようにしたいのですが、 JavaScriptはほとんど素人なのでどこをいじってよいかわかりません。 カスタマイズの仕方がわかる方がいらっしゃいましたら、お知恵を貸してください。 出来上がりを重視していますので、上記サイトのカスタマイズではなくても、他サイトで良いサンプルを掲載しているサイトがありましたら、そちらの紹介でも構いません。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

「ドロップダウンメニュー」とか「dropdown menu」又は「pulldown menu」などをキーにぐぐってみると、それこそ嫌になるほどヒットすると思いますので、気に入ったものをご利用なさるのがよろしいかと。 例えばの例(内容の吟味はしていません) クリックタイプのものでも、オプションなどでホバータイプとの選択が可能なものもあるかと思います。 http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/ http://www.designwalker.com/2009/02/jquery-dropdown.html もしも自作する気があるのなら、作り方の解説ページ。 (原理がわかれば自分の好きなものを作りやすいかと) http://ascii.jp/elem/000/000/475/475908/

yukikaraqq
質問者

お礼

回答、ありがとうございます。 私が探した時は、プルダウン全体が一気に出てくるものしか見つけられなくて…まだまだ甘かったということですね。 助かりました。本当にありがとうございました。

関連するQ&A

  • JavaScriptとCSSを使ったプルダウンメニューの作り方

    下記のようなサイトの左メニューのように、 横にプルダウンメニューが出てくるようにしたいのですが、 http://journal.mycom.co.jp/top/column/index.html JavaScriptとCSSを使ってするやり方&ソース&サンプルを 教えて下さい。 それが書かれてあるURLを教えていただいてもかまいません。

  • 自動でプルダウン

    HP作成に関する質問なのですが。 ポインターを乗せるだけで、自動で(クリックなしで)プルダウンのように、数個のメニュー(リンク)が開き、開いたメニューをポインターで選択して、クリックすれば、ジャンプ出来る。 とゆうサイトを見かけました。 ソースを参照しても、解読出来なかったので、 質問させていただきます。 html,JavaScript,の範囲で、上記の事が可能でしょうか? サンプルとしてのタグを教えていただくと助かります。 よろしくおねがいします

    • ベストアンサー
    • HTML
  • サイドバー用のプルダウンメニューの作成

    こんにちは。 現在、サイドバー用のプルダウンメニューを作成しようと考えています。下記のサイトのように、縦にメニューを並べるような感じです。 下記サイトはオンマウス時に横にプルダウンが表示されていますが、これを縦にプルダウンが表示されるようにするにはどのようにjavascript、html、cssを作成すればいいでしょうか?下記サイトはCSSとhtmlで作られていますが、私はjavascriptを使うつもりでいます。 どなたかご存知の方がいらっしゃりましたら、ぜひ教えてください。 http://www.stylish-style.com/csstec/ultimate/css-roll-2.html

  • HTMLのプルダウンにjavascriptの値

    HTMLのセレクトボックスのプルダウンにjavascriptの配列の値を入れようとした場合は、何てソースを書けばいいのでしょうか。参考サイトやサンプルソースを出来れば教えて下さい。

  • droppyとslideshowの共存

    jQueryについて質問です。 droppy.js(http://www.css-lecture.com/log/javascript/jquery-droppy-menu.html)と slideshow.js(http://www.css-lecture.com/log/javascript/039.html)を同じページに組み込みたいのですが、同時にいれると、slideshow.jsは動きますが、droppy.jsが動かないのです。 javascript初心者ですので、簡単に改善できる方法がありましたら、 どなたか教えてもらえますでしょうか。。 よろしくお願いします。

  • テキストフィールドでのプルダウンメニュー

    テキストフィールド内で↓キーを押下すると、プルダウンメニューが表示される HPを良くみます。恐らく、JavaScriptにより実現していると思われますが、 サンプルソースあるいは参考URLを教えて下さい。これはIEのみ使用可能で ネスケは不可なのでしょうか?併せてお願いします

  • プルダウンメニューについて

    知人から頼まれホームページを作成しています。 javascriptでプルダウンメニューと打ち出し画像の両方を使うとうまく表示されません。 グローバルナビゲーション(プルダウンメニュー)のすぐ下に打ち出し画像がくるレイアウトになります。 打ち出し画像が邪魔をしてプルダウンのサブメニューが表示されません。 【プルダウンメニュー】 http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html 【打ち出し画像】 http://jonraasch.com/blog/a-simple-jquery-slideshow 上記の2つを組み合わせ、プルダウンの伸びたメニューが打ち出し画像に重なり、動かすことは可能でしょうか? HTMLとCSSの知識はありますが、プログラムの知識はありません。 よろしくお願いします。

  • レイヤーになっているプルダウンメニューの作り方

    レイヤーになっているプルダウンメニューの作り方を 教えてください。 ↓これサンプルです。  http://www.jcb.co.jp/index2.html  http://www.kokuyo.co.jp/will/actic/index.html htmlじゃなくってJavascriptですか? Dreamweaverなんかでお手軽に作れたりしないんでしょうか?

    • ベストアンサー
    • HTML
  • IE9でプルダウンメニューが使えない

    IE8では機能していたプルダウンメニューが、IE9で見るとメニューが開いた状態で表示されるようになりました。このプルダウンメニューのソースは、ほかのサイトからコピーいして使用していたものです。 どなたかIE9で使えるプルダウンメニューのソース、またはそれに代わる方法が分かる方がいらっしゃいましたら、教えて下さい。

    • 締切済み
    • CSS
  • jQueryでプルダウンメニュー

    jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか? ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>

専門家に質問してみよう