性格悪い人が優勝

真横に展開するドロップダウン（プルダウン）メニュー

解決済

  • 質問者：voshietev
  • 質問日時：
  • 回答数：3件

以下の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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： DrFell
  • 回答日時：

http://www.cssplay.co.uk/menus/flyout4.html
等はいかがでしょうか？若干美しくないソースですが、ie6等に対応するためで、そのあたりへの配慮をなくせば美しいソースとなります。

例の1と2.3の違いは親要素のpositionをどこにするかだけですので、サンプルを解読、比較すれば自分で作れるようになると思います。上記サンプルを利用すれば、著作権配慮の制約がありますので、ご自分で組めばそんなもの必要なくなります。

蛇足ですが、ドロップダウン・フライアウトメニューはアクセスビリティ上問題が多くあります。

また、同じサイト内にメガドロップダウンメニューのサンプルもあります。
http://www.cssplay.co.uk/menus/pro-flyout-list.h …
http://www.cssplay.co.uk/menus/html-plus-time-fl …
要望とは少し違いますが、こちらの方がアクセスビリティ上好ましいようです。参考になれば幸いです。
    • good
    • 1
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

[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/HT … )
　を開いて、表示メニューからスタイルシートを選択すると、HTMLを変更せずに様々なデザインが選択できますね。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

別に、そのままデザインすれば良いだけのような気がしますけど？？？


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以外のコンテナブロックの位置を参照する。
　これを理解しておけば良いです。言い換えれば、示された通常のプルダウンより簡単です。

今から出かけますので、上記を元にリストを作って置いてくださいね。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報