- ベストアンサー
真横に展開するドロップダウンメニューの作り方
- 真横に展開するドロップダウンメニューの作り方をご教授ください。今まで見たプルダウンメニューは上下方向に展開していくものが多かったので、天の位置が同じでヨコに展開していくタイプのサンプルを探しています。
- リスト1からリスト12までを選択した状態で展開するドロップダウンメニューの作り方を教えてください。ヨコに展開していくタイプのサンプルを探しています。
- リスト7からリスト73までを選択した状態で展開するドロップダウンメニューの作り方を教えてください。ヨコに展開していくタイプのサンプルを探しています。
- みんなの回答 （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以外のコンテナブロックの位置を参照する。 これを理解しておけば良いです。言い換えれば、示された通常のプルダウンより簡単です。 今から出かけますので、上記を元にリストを作って置いてくださいね。
