真横に展開するドロップダウンメニューの作り方
- 真横に展開するドロップダウンメニューの作り方をご教授ください。今まで見たプルダウンメニューは上下方向に展開していくものが多かったので、天の位置が同じでヨコに展開していくタイプのサンプルを探しています。
- リスト1からリスト12までを選択した状態で展開するドロップダウンメニューの作り方を教えてください。ヨコに展開していくタイプのサンプルを探しています。
- リスト7からリスト73までを選択した状態で展開するドロップダウンメニューの作り方を教えてください。ヨコに展開していくタイプのサンプルを探しています。
- ベストアンサー
真横に展開するドロップダウン（プルダウン）メニュー
以下の1.のようなタイプのプルダウンメニューはいくつもサンプルがありますが、2.3.のように天の位置が同じでヨコに展開していくタイプのサンプルを探しています。ご存知のかた、もしくは作り方がわかる方がいらっしゃいましたらご教授ください。 1.リスト2->リスト23を選択した状態 リスト1 リスト2 リスト21 リスト3 リスト22 リスト4 リスト23 リスト231 リスト5 リスト24 リスト232 リスト6 リスト25 リスト233 リスト7 リスト26 リスト234 ------リスト27 リスト235 -------------リスト236 -------------リスト237 （-は位置固定のため無視してください） 2.リスト1->リスト12を選択した状態 リスト1 リスト11 リスト121 リスト2 リスト12 リスト122 リスト3 リスト13 リスト123 リスト4 リスト14 リスト124 リスト5 リスト15 リスト125 リスト6 リスト16 リスト126 リスト7 リスト17 リスト127 3.リスト7->リスト73を選択した状態 リスト1 リスト71 リスト731 リスト2 リスト72 リスト732 リスト3 リスト73 リスト733 リスト4 リスト74 リスト734 リスト5 リスト75 リスト735 リスト6 リスト76 リスト736 リスト7 リスト77 リスト737
- voshietev
- お礼率42% (3/7)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
http://www.cssplay.co.uk/menus/flyout4.html 等はいかがでしょうか？若干美しくないソースですが、ie6等に対応するためで、そのあたりへの配慮をなくせば美しいソースとなります。 例の1と2.3の違いは親要素のpositionをどこにするかだけですので、サンプルを解読、比較すれば自分で作れるようになると思います。上記サンプルを利用すれば、著作権配慮の制約がありますので、ご自分で組めばそんなもの必要なくなります。 蛇足ですが、ドロップダウン・フライアウトメニューはアクセスビリティ上問題が多くあります。 また、同じサイト内にメガドロップダウンメニューのサンプルもあります。 http://www.cssplay.co.uk/menus/pro-flyout-list.html http://www.cssplay.co.uk/menus/html-plus-time-flylist-menu.html 要望とは少し違いますが、こちらの方がアクセスビリティ上好ましいようです。参考になれば幸いです。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
[HTML]判りやすいようにタブを全角スペースに置き換えてあります。 <body> <div class="header> </div> <div class="section"> <h2>見出し</h2> <p>・・・</p> <div class="nav"> <ol> <li>section1 <ol> <li>section1-1 <ol> <li>section1-1-1</li> <li>section1-1-2</li> <li>section1-1-3</li> <li>section1-1-4</li> <li>section1-1-5</li> <li>section1-1-6</li> </ol> </li> <li>section1-2 ・・・【中略】・・・ <li>section7-6 <ol> <li>section7-6-1</li> <li>section7-6-2</li> <li>section7-6-3</li> <li>section7-6-4</li> <li>section7-6-5</li> <li>section7-6-6</li> </ol> </li> </ol> </li> </ol> </div> </div> <div class="footer" </div> </body> スタイルシートは、とっても簡単になります。 div.section div.nav ol,div.section div.nav ol li{ display:block;list-style-none; margin:0;padding:0; line-height:2em; width:6em; } div.section div.nav ol li{padding:0 0.5em;} div.section div.nav ol{ position:relative; height:14em; /* マウスが外れたときのために(7項目×2line-height */ } div.section div.nav ol ol{ position:absolute; top:0; left:7em; } /* ここから下はプルダウンメニュー */ div.section div.nav ol ol{display:none;} div.section div.nav ol li:hover ol{display:block;} div.section div.nav ol li:hover ol ol{display:none;} div.section div.nav ol li:hover ol li:hover ol{display:block;} /* ここまで */ /* ここからはおまけ */ li:hover:after{content:"■";} li li li:hover:after{content:none;} li{background-color:silver;} div.section div.nav ol li{background-color:rgb(255,80,80);} div.section div.nav ol li+li{background-color:rgb(255,160,80);} div.section div.nav ol li+li+li{background-color:rgb(255,255,160);} div.section div.nav ol li+li+li+li{background-color:rgb(120,255,120);} div.section div.nav ol li+li+li+li+li{background-color:rgb(80,255,255);} div.section div.nav ol li+li+li+li+li+li{background-color:rgb(80,80,255);} div.section div.nav ol li+li+li+li+li+li+li{background-color:rgb(160,80,255);} div.section div.nav ol li:hover ol li{background-color:rgb(255,80,80);} div.section div.nav ol li+li:hover ol li{background-color:rgb(255,160,80);} div.section div.nav ol li+li+li:hover ol li{background-color:rgb(255,255,160);} div.section div.nav ol li+li+li+li:hover ol li{background-color:rgb(120,255,120);} div.section div.nav ol li+li+li+li+li:hover ol li{background-color:rgb(80,255,255);} div.section div.nav ol li+li+li+li+li+li:hover ol li{background-color:rgb(80,80,255);} div.section div.nav ol li+li+li+li+li+li+li:hover ol li{background-color:rgb(160,80,255);} div.section div.nav ol li ol li ol li{ background-color:white!important;color:black!important; } おまけは別にして、カスケーディングと値の決定方法を知っていれば、こんなに簡単に済むのですよ。 大事なことは、HTMLをきちんと書くことかな・・ ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) を開いて、表示メニューからスタイルシートを選択すると、HTMLを変更せずに様々なデザインが選択できますね。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
別に、そのままデザインすれば良いだけのような気がしますけど？？？ HTMLは、 <div class="nav"> <ol> <li>section1 <ol> <li>section1-1 <ol> <li>section1-1-1</li> <li>section1-1-2</li> <li>section1-1-3</li> <li>section1-1-4</li> <li>section1-1-5</li> <li>section1-1-6</li> </ol> </li> <li>section1-2 <ol> <li>section1-2-1</li> <li>section1-2-2</li> <li>section1-2-3</li> 以下省略・・・ ときちんとマークアップさえされていれば、お好きに ★position:absoluteを指定されると、その直近の親であるstatic以外のコンテナブロックの位置を参照する。 これを理解しておけば良いです。言い換えれば、示された通常のプルダウンより簡単です。 今から出かけますので、上記を元にリストを作って置いてくださいね。
関連するQ&A
- プルダウンメニューを正常に戻したい
エクセル２００３を使用しています。 入力規則で、リストを選択できるようにしています。 リストは上から「北海道」「青森」…「沖縄」と５０項目位あり、プルダウンメニューを開いた時点で、普通なら何も選択していない状態になると思います。 今は、「沖縄」の下に空白が３つあり、プルダウンメニューを開いたら、その空白部分が選択される状態です。 メニューを開いたら、北海道から選択する正常な状態に戻すには、どうすればよろしいでしょうか？ よろしくお願いします。
- 締切済み
- オフィス系ソフト
- 全てが展開するドロップダウンメニュー
こんにちは。 サイトのメニューをドロップダウンメニューにしようかと 思っているのですが、MITSUBUSHIMOTORSのサイトの ような全てが展開するドロップダウンメニューがいいなと 思っているのですが、似たようなサンプルが見当たらず、 知っている方がいたらと思い投稿しました。 http://www.mitsubishi-motors.com/jp/index.html 似たようなものを知っている方がおりましたら 教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- エクセルのプルダウンメニューの字の大きさを大きくしたいのですが
データの入力規則をリストからの 選択式にすることが出来たのですが （プルダウンメニューから選ぶやつ） 選択リスト内に字ががたくさんあるため もうちょっと大きな字でプルダウンメニュー を見たいのですが、何かやり方ってあるのでしょうか？ お詳しい方、教えていただければ幸いに存じます。
- ベストアンサー
- その他MS Office製品
- ドロップダウンメニューに関する質問。超初心者です。
ドロップダウンメニュー（親メニューだけgif画像で子メニューはcssで表示）を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m
- ベストアンサー
- JavaScript
- WindowsXPライクなドロップダウンメニュー
windows osのような プルダウンメニューをウェブページのナビゲーションとして再現したい です。 windows osのような プルダウンメニューとは ファイルメニュー -> 新規作成 というようなアレです。 特に欲しい機能としては、プルダウンメニューを表示している状態で メニュー外の部分をクリックすると、プルダウンメニューが 閉じるという動きです。 javascript プルダウンメニュー で検索すると それらしいメニューのサンプルはでてきますが、 そういうのは見つかりませんでした。。 WindowsXPライクなドロップダウンメニューのADxMenuというツールを発見したのですが リンク先を見ると、webページがみれません。 このサイトは無くなってしまったのでしょうか。。 また代替ページか似たようなツールはないでしょうか。 意味不明でしたら加筆修正しますのでよろしくお願いします。
- 締切済み
- JavaScript
- プルダウンメニューの選択のしかた
HP中にあるプルダウンメニューを選択後 青く選択状態になったまま マウスをスクロールさせると選択位置が連動して変わりますよね。 このやり方にする方法を教えてください。 ノートのときはできたんですが、デスクトップにしてからはできません。
- 締切済み
- その他(PCパーツ・周辺機器)
- JavaScriptとCSSを使ったプルダウンメニューの作り方
下記のようなサイトの左メニューのように、 横にプルダウンメニューが出てくるようにしたいのですが、 http://journal.mycom.co.jp/top/column/index.html JavaScriptとCSSを使ってするやり方＆ソース＆サンプルを 教えて下さい。 それが書かれてあるURLを教えていただいてもかまいません。
- 締切済み
- JavaScript
- プルダウンメニューのリンク
こんばんは！上記の件なのですが、プルダウンメニューのリストの中の例えばリンク1は、フレームの右に表示、リンク2は左に表示、リンク3は、フレームを無視して全画面に表示というようなリンクの設定をしたいのですが、お願い致します。プルダウンのボタンを１個で振り分けるのは、できないのでしょうか？宜しくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>
- 締切済み
- CSS
- ＰＨＰとプルダウンメニュー
ＰＨＰで以下のことをやりたいのですが、どうしてもうまく出来ません。経験の有る方、どうぞ宜しくお願い致します。 ２つのプルダウンメニューがあり、１つ目のプルダウンメニューから選択時、選択された値に関連する項目をＤＢより２つ目のプルダウンメニューに登録したいのです。 ちなみにＤＢはＯｒａｃｌｅを使用しています。 プルダウンメニューから選択時は、どのようなイベント（？）が発生するのでしょうか？ もし、ＰＨＰで出来ない場合、他にどのような方法がありますか？ 宜しくお願い致します。
- ベストアンサー
- PHP
