質問: cssのみでメガメニューの作成について http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ のぺーじにある big menus, small screens: responsive, multi-level navigation というドロップダウンメニューをメガメニューに変更しようとしていますが 2階層目のリストがどうしても横並びにできません。 cssは下記の箇所のどこかに「float:right;」を入れればよいと考え、いろいろ触りましたが、 2階層目が表示されなくなったり、3階層目が表示されなくなったりします。 .nav > li > a { display: block; } .nav li ul { position:absolute; left: -9999px; border: 1px solid #ccc; background: #ffffff; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top:0; } .nav li li a { display: block; background: #1d7a62; position: relative; z-index:100; } .nav li li ul { background:#249578; z-index:200; } .nav li li li a { background:#249578; z-index:200; } メガメニューはjqueryを使って作っている紹介ページがあり 試しましたが、そうすると、レスポンシブ(小さい画面)した際の 開閉式のメニューが動作しなくなりました。 どうかご教示ください。お願いします。
回答: ごく簡単な例を挙げておきます。 仕組み自体は、スタイルシートでの値、カスケーディングを知っていれば実に簡単なものです。スタイルシートを学ぶときは、やはり仕様書順にきちんと順序だてて学ばないと・・。 仕様書でも 5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) プロパティの説明はその後 8.ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html ) です。 ★以下に順序だてて説明しておきますが、あなたの文書構造とは異なるので、それに合わせてしっかり理解して作業してください。 ★以下はタブを全角スペースに置換してあります。使うなら戻すこと ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★理解して作業しないと絶対に出来ません。htmlは率直に書き、スタイルシートを理解さえすればどのようにでもデザインできます。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/webservice/howto/sample/html/nav/navigation1.html ) このサイトで、表示メニューからスタイルシートを選択すると、このあたりがよくわかるでしょう。 ★一見複雑ですが、単純な配置をただ繰り返しているだけです。 目次として次のようにマークアップされていたとします。 1. 最初に 2. 第一節 1. 第一節第1章 1. 第一節第1章第1項 2. 第一節第1章第2項 3. 第一節第1章第3項 2. 第一節第2章 1. 第一節第2章第1項 2. 第一節第2章第2項 3. 第二節 1. 第二節第1章 1. 第二節第1章第1項 2. 第二節第1章第2項 3. 第二節第1章第3項 2. 第二節第2章 1. 第二節第2章第1項 2. 第二節第2章第2項 3. 第二節第2章第3項 4. 第三節 1. 第三節第1章 1. 第三節第1章第1項 2. 第三節第1章第2項 3. 第三項第1章第3項 5. 第四節 1. 第四節第1章 1. 第四節第1章第1項 2. 第四節第1章第2項 3. 第四項第1章第3項 /* content table(目次)の横幅を指定しておきます。ウィンドウの80%で中央 */ div#contenttable{ width:80%;min-width:640px;margin:0 auto; text-align:center;line-height:2em;/* これらは継承されるのでここで書いておく */ } /* 次いでリストをblockに変更し、その他細かい設定 */ div#contenttable ol,div#contenttable ol li{ display:block; list-style:none; margin:0;padding:0; position:relative;/* 子孫達が位置やサイズの基準に出来るよう */ } div#contenttable ol{width:100%;}/* 親のdiv#contenttableいっぱい */ div#contenttable ol li{ display:inline-block;/* 横並び */ width:18%; border:solid gray 1px; } div#contenttable ol li ol{ position:absolute; top:2em;left:-1px; width:100%;margin:0; } div#contenttable ol li ol li{ width:100%; display:block; /* blockに戻しておく */ } div#contenttable ol li ol li ol{ top:0; left:100%; } /* ここから下はおまけ */ div#contenttable ol li:last-child ol li ol{ left:-100%;/* 最後のものがはみ出したらまずいので */ /* css2.1ならdiv#contenttable ol li+li+li+li+li ol li ol */ } div#contenttable ol li:last-child ol li ol li{left:-2px;}/* border分微調整 */ /* 色づけ */ div#contenttable ol li:hover{background-color:yellow;} div#contenttable ol li ol li:hover{background-color:rgb(255,255,120);} div#contenttable ol li ol li ol li:hover{background-color:rgb(255,200,160);} /* 以下:hover処理 */ div#contenttable ol li ol{display:none;} div#contenttable ol li:hover ol{display:block;} div#contenttable ol li:hover ol li ol{display:none;} div#contenttable ol li ol li:hover ol{display:block;} /* ちょっとした遊び */ div#contenttable ol li:hover:before{content:"▲";position:absolute;left:-1em;top:0:color:red;}