- ベストアンサー
CSSでメニューバーをスクロールさせる技
HTMLとCSSだけで、メニューを2段階に表示させるテクニックはどうやればいいのでしょうか？
- seed_twice
- お礼率7% (138/1828)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞リンクをhoverした場合に、下の階層がスクロールされるような表現をやりたいのです。 まだ、よくわからないのですが、「スクロール」とは「画面での表示をずらしていくこと」でスクロール機能を持つユーザーエージェントに対してスライダーを表示することなのですが、その意味だとすると、あらかじめ枠が表示されているが、リンクにポインターを置いたときのみスライダーが現れると言う意味でしょうか？ そのHTMLをサンプルとして最後にあげておきます。 それとは違うよく使う方法(プルダウンメニュー)のスタイルシートもあわせて書いておきます。31行目から37行目をコメントアウトして、３９行目と４０行のコメントアウトを外すとそちらになります。 ★ここは、HTMLの質問ページですから、スタイルシートについては説明しませんが、HTMLさえきちんと出来ていれば、スタイルシートでどのようにでもデザインできます。 「HTMLはサンプルのように、きちんと文書構造にしたがってマークアップしてください。」 が、回答と考えてください。 なお、 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済みです。 ★タブは＿に置換してありますから、元に戻してテストしてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header{padding-bottom:2em;} div.nav ol,div.nav ol li{ ＿display:block;list-style:none; ＿margin:0;padding:0; ＿line-height:2em; ＿text-align:center; ＿background-color:white; } div.nav a{ ＿display:block; ＿width:100%;height:100%; ＿text-decoration:none; } div.nav ol li{ ＿width: 10em; ＿border:solid 1px gray; ＿position:relative; } /* 親リストを縦に並べて詳細は親リストに:hoverしたときのみスクロール */ div.nav ol li ol{ ＿height:6em;overflow:hidden; } div.nav ol li:hover ol{ ＿overflow:scroll; ＿width:12em; } /* 親リストを横に並べる */ /* div.nav ol li:hover ol{display:block;position:absolute;} div.nav ol li{float:left;} div.nav ol li ol{display:none;} div.nav ol li:hover ol{top:2em;left:0} div.section{clear:left;} div.nav{width:31em;margin:0 auto;} */ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./m1">menue1</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="./m1-1">menue1-1</a></li> ＿＿＿＿＿＿<li><a href="./m1-2">menue1-2</a></li> ＿＿＿＿＿＿<li><a href="./m1-3">menue1-3</a></li> ＿＿＿＿＿＿<li><a href="./m1-4">menue1-4</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="./m2">menue2</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="./m2-1">menue2-1</a></li> ＿＿＿＿＿＿<li><a href="./m2-2">menue2-2</a></li> ＿＿＿＿＿＿<li><a href="./m2-3">menue2-3</a></li> ＿＿＿＿＿＿<li><a href="./m2-4">menue2-4</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="./m3">menue3</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="./m3-1">menue3-1</a></li> ＿＿＿＿＿＿<li><a href="./m3-2">menue3-2</a></li> ＿＿＿＿＿＿<li><a href="./m3-3">menue3-3</a></li> ＿＿＿＿＿＿<li><a href="./m3-4">menue3-4</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>フッタ(文書情報)</h2> ＿</div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
二段階の意味が不明ですが、 「プルダウンとして一番目の階層の項目をhoverすると、二段階目が表示される。」 ・一段階目を横に、二段階目をその下に縦 ・一段階目を縦に、二段階目はその脇に ・一段階目を縦に、二段階目はその下に 「二段階目をずらして表示する」 など・・ どのような表示をしたいにしても、HTMLをきちんとマークアップすることです。 <div class="nav"> <ol> <li> <ol> <li></li> <li></li> </ol> </li> <li> <ol> <li></li> <li></li> </ol> </li> </ol> </div> とかです。 あとは、それをどのように表示した以下でスタイルを書きます。
補足
リンクをhoverした場合に、下の階層がスクロールされるような表現をやりたいのです。