ドロップダウンの作成方法

前へ 次へ
このQ&Aのポイント
  • ホームページの作成に挑戦している方へ、ドロップダウンの作成方法について解説します
  • ドロップダウンメニューを実装するためのスクリプトの詳細を紹介します
  • ドロップダウンメニューの作成には、HTML、CSS、JavaScriptの基本知識が必要です
回答を見る
  • ベストアンサー

ドロップダウンの作成方法

こんにちは。 早速ですが質問させていただきます。 ホームページの作成に挑戦しているのですが まだまだ知識が乏しいため、ドロップダウンの 作成方法（スクリプト）が分かりません。 作りたい機能は以下のとおりです。よいサイトが あれば教えていただければ非常に助かります。 メニューのボタンをつくり、そこをマウスオーバーさせると縦長のメニュー（そこには各ボタンに関連する項目の小メニューが現れるようにしたいと思っています。たとえば、[朝ご飯]というボタンにマウスオーバーさせると、[白ご飯][卵焼き][お味噌汁]といった項目がのれんのように出現するという感じです。ボタンは作成済みです。私のイメージ通りのサイトがあったのでこちらをご覧いただけるとありがたいです。「ライブラリーについて」など。http://www.apu.ac.jp/media/modules/mediacenter/index.php?id=1&sel_lang=japanese） 図書館の本や今までの投稿記事、ネット、[view source]に当たってみたのですが、イメージのものと違うものが多く(プルダウン？)、また思っていたものでもスクリプトが難しく取り入れることができませんでした。 どなたかよろしくお願いいたします。

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

  • ベストアンサー
noname#21765
noname#21765
回答No.1

私も以前、同じようなテーマで悩んだ時期がありました。 さんざん探した挙句「DynamicHTMLcross-browser」にたどりついたのを覚えています。 似たようなものを公開しているサイトもいくつかありますがここが一番いい感じです。 このサイトより、おそらく下記のページで解決ができるでしょう。 「リンクに触るとメニューが現れる」 http://www.fureai.or.jp/~tato/DHTML/simple/part2/sample/menu/menu.htm （ソースを表示して69行目～455行目が必要なスクリプトです） 余談ですが、 ちょっと変わったところでメニューがスライドして出てくるのもありました。 Web2.0っぽいリッチな雰囲気が面白いです。 「リンクに触るとメニューがスライドして出てくる」 http://www.fureai.or.jp/~tato/DHTML/simple/part2/b/b33/b33.htm なお、このサイトには他にも参考になるものがたくさんありますので、いろいろ見てみるといいかもしれません。 http://www.fureai.or.jp/~tato/DHTML/simple/contents.htm 私はこのサイトの運営者とは無関係です。 別に宣伝ではありませんのであしからず。

creampan8
質問者

お礼

soonsさま ご回答ありがとうございました。 教えてくださったサイトを参考に作成することができました！ 本当に感謝しています。 ふたつめに教えて下さったアドレスにアクセスして見てみましたが 確かにリッチですね☆ 残念なことに、ソースをコピーペーストをしても表示されなかったので（すべてコピーしたらうまくいくのではないかと思ったのですがうまくいかなかったです）、こちらは実現させることができなかったのですが、 このようなリッチなものもいつか作成できるようにがんばりたいと思います。 今回は本当にありがとうございました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • サイドナビにドロップダウンメニューを設置したい

    サイドナビにドロップダウンメニューを設置したい サイドナビにマウスオーバーしたときにだけでるメニューボタンを設置しようと思っています。 ナビは縦に並んでいて、マウスオーバーした時に出るメニューも縦に並ぶようにしたいです。 ナビのボタンとボタンの間に出てきて、そのメニューが出ると下にあるナビとかぶらずに下のナビは位置がずれるようにしたいです。 説明下手ですみませんが、下記のようなイメージです。 【メニュー1】 【メニュー2】 【メニュー3】 　　　↓ 【メニュー1】 　〔ドロップダウン1〕 　〔ドロップダウン2〕 【メニュー2】 【メニュー3】 よろしくお願いいたします。

  • 1枚の画像でナビゲーション＋ドロップダウンの設定

    上記の通りになるのですが、 1枚の画像だけを用意して、ナビゲーションメニュー＋一部のメニューには プルダウンも設定したいのです。 例を言えば MENU1、MENU2、MENU3、MENU4という項目があり、 MENU1とMENU2は単純にマウスオーバーをした際に色が変わるという設定をし、 MENU3とMENU4にはマウスオーバーをした際にその下にそれぞれMENU3_1、MENU3_2、MENU4_1、MENU4_2 というメニュー階層を縦表示でつけられればと思っています（これにもマウスオンマウスオフ、アクティブ時で色変えしたい）。 単純にマウスオーバー時に変わる設定ならば CSSのhover設定とactive設定でいけるかと思っているのですが、 項目中2つだけドロップダウンを入れるとなるとペライチでどのように設定すれば いいのか……と悩んでおります。 また、もし普通のメニューは1枚画像で用意して、 ドロップダウンメニューの部分は別画像を用意して設定する、 というの方が簡単であるならばそちらの手法もご指摘いただければと思います。 サンプルとしてペライチで作成する場合の「こういう風の画像を用意して設定できればな」 という画像を添付させていただきます。（サンプルなので簡略に作成しております） 手法は特に指定しておりません。 分かりにくい説明で大変申し訳ございませんが、ご教授いただけますと幸いです。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ドロップダウンメニューによるアイフレームへのリンク

    現在Webサイトを作っています。 ですがドロップダウンメニューからリンクをし、リンク先をアイフレームにするのがうまくいきません。 問題のページのHTML、及びJavaScriptは以下の通りです。 <html> <head> <script type="text/javascript"> <!-- function Mylink(form,sel){ mlink=sel.options[sel.selectedIndex].value; if(mlink!="-"){parent.albumf.location.href=mlink;} } //--> </script> </head> <body> <center> <IFRAME name="albumf" frameborder=0 src="●●.html" scrolling=no allowtransparency=true></IFRAME> <BR> <BR> <FORM method="post"> <select onChange="Mylink(this.form,this)"> <OPTION selected value="-">　　　　　＊ メニュー ＊</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="●●.html">項目１</OPTION> <OPTION value="▲▲.html">項目２</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> </center> </body> </html> JavaScriptに関する様々なページを調べましたが、どうしても自力で解決できませんでした。 どなたか改善方法を教えて下さい。 よろしくお願いします。

  • 縦のメニューバー作成方法で困っています。Part2

    今、縦のメニューを作成しています。 横長のボタンが８項目ありマウスがrolloverするとある座標まで移動するというようなものです。 作り方から言えば、まず座標の元となる物体をフィールド外で2つ作成し、実際にボタンにマウスがrolloverするとそのフィールド外の物体の座標まで移動し、マウスがrolloutすると横長ボタンがもう一つの物体の座標までもどる。といった風につくっています。 ここで質問なんですが、実は幕以外に８項目のボタンの下にボタンが選ばれるごとにコメントが表示するようにしたいのですが、自分でやってみたのですがいいように出来ません。 僕が、やってみた方法は、ボタンに_root.gotoandPlay(2)というscriptを書いて横から幕を登場させているので、そのまま２フレーム目にムービークリップ（アルファ０から表れる幕）を作成し幕があらわれるまでは出来たのですが、そこからアルファ0％になるように消したいのですがここの消し方がわかりません。 ちなみに、横長ボタンをシーン１でムービークリップで作成し、その中でボタンにしています。その為、ボタンのオーバー、ダウンを使っても一緒に横にスライドしてメッセージが見えなくなります。 説明が長ったらしくわかりにくいとおもいますが宜しくお願いします。

    • ベストアンサー
    • Flash
  • Flashを使ってのボタンのスクロールダウンの作成方法

    いつもお世話になっています。 Flashを使ってのボタンのスクロールダウンの作成方法 について質問です。 地図を作成し、リージョンボタンをマウスオーバーされたときに、 国名のスクロールダウン（添付図参照）を表示したいと考えています。 マウスオーバー時にプルダウンで表示、 というのはできるのですが、 それでは国数が多いときに問題があり、 そのためスクロールダウンを考えています。 スクロールダウンをFlashで作成するには どうすればよいでしょうか。 動きは以下の通りです。 ・エリア名ボタンのマウスオーバー ・スクロールダウンの国名一覧の表示 ・クリックでその国のページに飛ぶ 使用しているソフトは以下です。 Adobe Flash CS3 宜しくお願いします！

    • ベストアンサー
    • Flash
  • FLASHドロップダウン（？）メニュー

    さきほど http://oshiete1.goo.ne.jp/kotaeru.php3?q=714572 で質問させていただいたのですが状況が変わったので再度質問させていただきます。 【★】というボタンにロールオーバーするとメニューが下記のように出てきて、さらにロールアウト（メニューも含む）するとメニューが戻るというようにしたいのです。 【★】 　↓ロールオーバー 【★】自己紹介　掲示板 【★】ボタンは画像１と画像２からなってます。 透明のレイヤーを入れればいいのかと思い、画像２にメニューのすべてが収まるように透明な四角を描いた所意図する動きになりました。 が！メニューのボタンが生きてこないのです。 あたりまえですが、透明の四角の下にボタンがあるので、ロールオーバーにならないのです。 逆にボタンの方を下に配置してしまうと、【★】からマウスが離れたとたんメニューが戻ってしまいます。 どのようにしたらいいのでしょうか？

  • 下記のようなメニューを作成しようと思い、質問したところJavaScri

    下記のようなメニューを作成しようと思い、質問したところJavaScriptでの方法を教わり 作成したのですが、解決してから、右側の4つのボタンメニューに2pxぐらいの隙間が できてしまい、いろいろCSSで調整してみたのですが、どうしても解決できなく再度質問しました。 ※http://okwave.jp/qa/q5843544.htmlで質問と回答を得る http://www.nittsu.co.jp/index.html のサイトのグローバルメニュー下のFlashコンテンツ。 やりたかったことは、 同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。 教えてもらった方法は、http://www.red.oit-net.jp/tatsuya/java/image3.htm のサンプルデータと同様な方法で行いました。 また、さらに右側のボタンをマウスオーバーで同時に画像も変更できるとさらに良いです。 よろしくお願いいたします。

  • ＨＴＭＬ　ドロップダウンメニューのリンク先

    <SCRIPT LANGUAGE="JavaScript"> <!-- function Mylink(sel){ mlink=sel.options[sel.selectedIndex].value; if(mlink!="-"){ location.href=mlink; } } //--> </SCRIPT> <FORM method="post"> <select onChange="Mylink(this)"> <OPTION selected value="-">　　　　　★　メニュー　★</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="java_tokei1.html">時計の色と大きさをかえてみよう</OPTION> <OPTION value="java_hizuke.html">今日の日付を表示させよう</OPTION> <OPTION value="java_alert1.html">ボタンでアラートを表示させよう</OPTION> <OPTION value="java_back1.html">ボタンで背景の色をかえてみよう</OPTION> <OPTION value="java_link1.html">ボタンでリンクさせよう</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> 以上のようなドロップダウンメニューを入れたのですが リンク先を別ウインドウで開くことはできるでしょうか？ _blankをどこかにいれられますでしょうか？

  • 縦のメニューバー作成方法で困っています。

    今、縦のメニューを作成しています。 ボタンは８項目ありマウスがrolloverすると横から白い幕が出てくるというようなものです。 作り方から言えば、まず座標の元となる物体(ボタンと同じ形の四角いボタン)をフィールド外で2つ作成し、実際にボタンにマウスがrolloverするとそのフィールド外の物体の座標まで幕が移動し、マウスがrolloutすると幕がもう一つの物体の座標までもどる。といった風につくっています。 ここで質問なんですが、実は幕以外に８項目のボタンの下にボタンが選ばれるごとにコメントが表示するようにしたいのですが、自分でやってみたのですが出来ません。 僕が、やってみた方法は、ボタンに_root.gotoandPlay(2)というscriptを書いて横から幕を登場させているので、そのまま２フレーム目にムービークリップ（アルファ０から表れる幕）を作成し幕があらわれるまでは出来たのですが、そこからアルファ0％になるように消したいのですがここの消し方がわかりません。 説明が長ったらしくわかりにくいとおもいますが宜しくお願いします。

    • ベストアンサー
    • Flash
  • 垂直型のドロップダウンメニューの作成方法について

    http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行！」で試す事が出来ます。 また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。 【ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第１ ≫</a> <ul> <li><a href="#">第２－１ ≫</a> <ul> <li><a href="#" target="_blank">第２－１－１</a></li> <li><a href="#" target="_blank">第２－１－２</a></li> <li><a href="#" target="_blank">第２－１－３</a></li> <li><a href="#" target="_blank">第２－１－４</a></li> </ul> </li> <li><a href="#">第２－２ ≫</a> <ul> <li><a href="#" target="_blank">第２－２－１</a></li> <li><a href="#" target="_blank">第２－２－２</a></li> <li><a href="#" target="_blank">第２－２－３</a></li> <li><a href="#" target="_blank">第２－２－４</a></li> </ul> </li> <li><a href="#">第２－３ ≫</a> <ul> <li><a href="#" target="_blank">第２－３－１</a></li> <li><a href="#" target="_blank">第２－３－２</a></li> <li><a href="#" target="_blank">第２－３－３</a></li> <li><a href="#" target="_blank">第２－３－４</a></li> </ul> </li> <li><a href="#">第２－４ ≫</a> <ul> <li><a href="#" target="_blank">第２－４－１</a></li> <li><a href="#" target="_blank">第２－４－２</a></li> <li><a href="#" target="_blank">第２－４－３</a></li> <li><a href="#" target="_blank">第２－４－４</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、 第一階層(上記ソースの「第１」)をマウスオーバーした際、すべての内容が表示されませんでした。 その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【第二階層(第三階層)の現在のイメージ】 第２－１ 第２－２ 第２－３ 第２－４ 【第二階層(第三階層)のやりたいイメージ】 第２－１　第２－２ 第２－３　第２－４ 以上、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する