ＣＳＳで作成する縦型と横型各々２種のドロップダウンメニュー・
リスト形式（ｕｌとｌｉ）で表示し、ドロップダウンメニューはＣＳＳの表示、非表示を利用。
- 概要
事例１
縦型２階層
- ２階層目は、1階層目の下に表示。縦型なので、サイドメニュー向き。２階層目を表示するとその高さ分、下の記事が下方に動く。このタイプはＣＳＳが厄介。修正
事例２
縦型2階層
- ２階層目は、１階層目の横に表示。2階層目が横表示で、右に記事があるとメニューが記事の上に重なる。右メニュー分の幅（記事があっても良い）が無いと、ページ領域内からはみ出す。
事例３
横型３階層
- ３階層まで表示。２階層目メニューは、１階層目の下に表示し、3階層目は、2階層目の右に表示。右端のメニューは、３階層目が画面からはみ出すので第３階層を左に表示。 修正
事例４
横型3階層
- ２階層以下を縦１列に３階層まで表示できる横型メニュー。メニュー幅を％指定なので、レスポンシブウェッブに最適です。お薦めのモデル。
事例１ 説明位置へ
事例２ 説明位置へ
事例４ 説明位置へ
注意点：事例２と３は、横に表示しているため画面が小さくなると表示出来なくなる問題があり、スマホ、タブレットに対応できない状態になります、その対応について、
１．メディアクエリー（以下、ＭＱと略）で横に表示するメニューを非表示にする。親メニューには、必ずリンクが必要。
当サイトでは、この仕様となっている。
２．ＭＱで横表示を縦表示に変える。縦にした時、メニュー数が多い場合とても使いずらい。
３．ヘッダー部の中に縦型のメニューにして組み込む。 追記
マウス・カーソル：マウスが重なった時、カーソル形状を変えたい場合（事例１の場合）
追記
１．各メニューの親ボックス（divタグ）にクラスを一つ追加
|
1 |
<div class="list1_box csl_ptr"> |
２．ＣＳＳに以下を追加
|
1 |
.csl_ptr ul li {cursor:pointer;} |
共通のＣＳＳ
|
1 2 3 4 |
a {text-decoration:none;} ul, li {list-style-type: none; margin: 0; padding: 0;} |
事例１・縦型 下に表示 修正
事例１・ＨＴＭＬ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="list1_box"> <ul class="list1"> <!-- 親メニューＡ 全体域 --> <li><a title="メニューＡ">メニューＡ</a> <!-- 親メニューＡ 表示 --> <ul> <!-- Ａ 子メニュー全体域 --> <li><a title="メニューＡ－１">メニューＡ－１</a></li> <!-- Ａ 子メニューＡ－１ --> <li><a title="メニューＡ－２">メニューＡ－２</a></li> <!-- Ａ 子メニューＡ－２ --> <li><a title="メニューＡ－３">メニューＡ－３</a></li> <!-- Ａ 子メニューＡ－３ --> </ul> <!-- Ａ 子メニュー全体域 終了--> </li> <!-- 親メニューＡ 表示 終了 --> </ul> <!-- 親メニューＡ 全体域 終了 --> <ul class="list1"> <li><a title="メニューＢ">メニューＢ</a> <ul> <li><a title="メニューＢ－１">メニューＢ－１</a></li> <li><a title="メニューＢ－２">メニューＢ－２</a></li> <li><a title="メニューＢ－３">メニューＢ－３</a></li> </ul> </li> </ul> <ul class="list1"> <li><a title="メニューＣ">メニューＣ</a> <ul> <li><a title="メニューＣ－１">メニューＣ－１</a></li> <li><a title="メニューＣ－２">メニューＣ－２</a></li> <li><a title="メニューＣ－３">メニューＣ－３</a></li> <li><a title="メニューＣ－４">メニューＣ－４</a></li> </ul> </li> </ul> </div> |
事例１・ＣＳＳ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.list1_box ul{ /* 親メニュー 全体 */ width: 160px;} /* 幅 */ .list1 li { /* 各メニュー領域 */ line-height:1.75em; text-align:center; /* 中央配置 */ border-left:1px solid #000; /* 左罫線 */ border-bottom:1px solid #000; /* 下罫線 */ background-color:#cff;} /* 背景色 */ .list1_box ul li ul{ /* 子メニュー */ display: none; } /* 初期値・非表示 */ .list1 li:hover ul { /* 親メニュー ホバー時・子メニュー全体 */ display:block;} /* 表示 */ .list1 li:hover { /* 親メニュー ホバー時 */ border-bottom:none;} /* 下罫線 非表示 */ .list1 li:hover { /* 親メニュー ホバー時 親*/ background-color:#ffc;} /* 背景色 */ .list1 li:hover ul li{ /* 親メニュー ホバー時・子メニュー */ border-left:none; } /* 左罫線無し */ .list1 li:hover ul li:first-child{ /* 親メニュー ホバー時・子メニュー １番目 */ border-top:1px solid #000;} /* トップ罫線 */ .list1 li:hover ul li{ /* 親メニュー ホバー時・子メニュー */ border-bottom:1px solid #000;} /* 下罫線 */ .list1 li:hover ul a { /* 親メニュー マウスホバー時・子メニュー リンク */ display:block; /* 領域拡大 */ background-color:#ffc;} /* 背景色 */ li.list1 li ul li:hober{ /* 子メニュー ホバー時・子メニュー */ border-bottom:1px solid #000;} /* 下罫線 */ /* 子メニュー ホバー時・子メニュー最終メニュー */ .list1 li ul li:hober ul li:last-child{ border-bottom:1px solid #000;} /* 下罫線 */ .list1 li { /* 各メニュー領域 */ border-left:1px solid #000;} /* 左罫線 */ |
事例１・ご利用にあたっての考慮点
- 行番
- 説明
- 2
- メニューの幅
- 4
- メニューの高さ。heightの指定ではデザインが崩れる。
- 17-18
- 左罫線の重複を解除。
- 31-32
- 左罫線。17-18行目で罫線の重複を無くしているので、最後に罫線を復活。
事例２・縦型 真横に表示 修正
事例２・ＨＴＭＬ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="list2_box"> <ul class="list2"> <li><a title="メニューＸ">メニューＸ</a> <ul> <!-- 子メニュー 事例１と同じパターンなので、省略 --> </ul> </li> </ul> <ul class="list2"> <li><a title="メニューＹ">メニューＹ</a> <ul> <!-- 子メニュー 事例１と同じパターンなので、省略 --> </ul> </li> </ul> <ul class="list2"> <li><a title="メニューＺ">メニューＺ</a> <ul> <!-- 子メニュー 事例１と同じパターンなので、省略 --> </ul> </li> </ul> </div> |
事例２・ＣＳＳ
事例２では、子メニューの修飾は省略しています。子メニューを横に表示するタイプは、レスポンシブ・サイトの場合、デザイン上ちょっと工夫が必要です。ＣＳＳで子メニューの左位置（13行目）を小さくして、メニューに重ねる方法があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.list2_box { /* メニュー全体のボックス */ z-index:30;} /* 下に重なる記事より上位の表示優先度 */ .list2 { /* 各親メニュー */ position: relative;} /* 相対配置 */ .list2 li { /* 各メニュー */ width: 160px; /* 幅 */ text-align:center; /* メニュー文字の中央配置 */ border-bottom:1px solid #03f; /* 下線 */ background-color:#cff;} /* 背景色 */ .list2 li ul{ /* 子メニュー */ display: none; /* 初期設定 非表示 */ position: absolute; /* 絶対配置(absolute) */ left: 160px; /* 左から160px */ top:0px;} /* トップから 0px */ .list2 li:hover ul{ /* 親メニュー・ホバー時 */ display:block; /* 子メニューを表示 */ z-index: 30;} /* 下に重なる記事より上位の表示優先度 */ .list2 li:hover ul li { /* 親メニュー・ホバー時 子メニュー */ background-color:#ffc;} /* 背景色 */ |
事例３・横型３階層 修正
事例３・ＨＴＭＬ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="list3_box"> <!-- メニュー全体のボックス --><ul class="list3"> <!-- 第１階層 １番目メニュー全体 -->lt;li><a title="Ｍｅｎｕ－Ａ">Ｍｅｎｕ－Ａ</a> <!-- 第１階層メニュー１番目 第２階層以下を入れ子に --> <ul> <!-- 第２階層のメニュー全体 --> <li><a title="Ａ－１">Ｍｅｎｕ－Ａ－１</a> <!-- 第２階層メニュー１番目 第３階層を入れ子に --> <ul> <!-- 第３階層のメニュー全体 --> <li><a title="Ａ－１－１">Ｍｅｎｕ－Ａ－１－１</a></li> <!-- 第３階層メニュー１ --> <li><a title="Ａ－１－２">Ｍｅｎｕ－Ａ－１－２</a></li> <!-- ２ --> <li><a title="Ａ－１－３">Ｍｅｎｕ－Ａ－１－３</a></li> <!-- ３ --> </ul> <!-- 第３階層のメニュー 終了 --> </li> <!-- 第２階層メニュー １番目終了 --> <li><a title="Ａ－２">Ｍｅｎｕ－Ａ－２</a> <!-- 第２階層メニュー２番目 第３階層を入れ子に --> <ul> <li><a title="Ａ－２－１">Ｍｅｎｕ－Ａ－２－１</a></li> <li><a title="Ａ－２－２">Ｍｅｎｕ－Ａ－２－２</a></li> <li><a title="Ａ－２－３">Ｍｅｎｕ－Ａ－２－３</a></li> </ul> </li> <!-- 第２階層メニュー２番目 終了 --> <li><a title="Ａ－３">Ｍｅｎｕ－Ａ－３</a> <!-- 第２階層メニュー３番目 第３階層を入れ子に --> <ul> <li><a title="Ａ－３－１">Ｍｅｎｕ－Ａ－３－１</a></li> <li><a title="Ａ－３－２">Ｍｅｎｕ－Ａ－３－２</a></li> <li><a title="Ａ－３－３">Ｍｅｎｕ－Ａ－３－３</a></li> <li><a title="Ａ－３－４">Ｍｅｎｕ－Ａ－３－４</a></li> </ul> </li> <!-- 第２階層メニュー３番目 終了 --> </ul> <!-- 第２階層のメニュー全体 終了 --> </li> <!-- 第１階層メニュー１番目 終了 --> </ul> <!-- 第１階層 １番目メニュー全体 終了 --> <ul class="list3"> <!-- 第１階層２番目メニュー以下 １番目と同じパターンなので省略 --> </ul> <ul class="list3"> <!-- 第１階層３番目メニュー以下 １番目と同じパターンなので省略 --> </ul> </div> <!-- メニュー全体のボックス 終了--> |
事例３・ＣＳＳ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* ============== 事例３・メニュー全体の設定 ============== */ .list3_box{ /* メニュー全体のボックス */ z-index:20; /* 記事が重なった時の優先度 */ max-width:480px; /* メニューの幅 */ margin:0 auto;} /* 中央配置 */ .list3 { /* 第１階層～第３階層を含む３個のメニュー */ position:relative; /* 相対配置 */ display:table-cell;} /* 横型リストの隙間を出さない */ .list3 li { /* 第１階層～第３階層を含む３個のメニュー・li部 */ width:140px; /* 幅 */ line-height:26px; /* 高さ */ background-color:#cff; /* 背景色 */ text-align:center; /* メニュー文字の中央配置 */ border-left:1px solid #000;} /* 左罫線 */ .list3_box ul:last-child li{ /* 右端メニュー */ border-right:1px solid #000;} /* 右罫線 */ .list3 ul { /* 横型 各メニュー */ position: absolute;} /* 絶対配置 */ .list3 li ul { /* 第２階層以下 */ display: none;} /* 非表示 */ /* ============== マウスホバー時の設定 ============== */ .list3 li:hover { /* 第１階層・ホバー時 第１階層*/ background-color:#ffc;} /* 背景色 */ .list3 li ul li:hover ul li { /* 第２階層・ホバー時 第１、第２階層*/ background-color:#ffc;} /* 背景色 */ ul.list3 li:hover ul { /* 第１階層・ホバー時 第２階層 */ display:block;} /* 表示 */ ul.list3 li:hover ul li ul { /* 第２階層・ホバー時 第３階層 */ display:none;} /* 非表示 */ ul.list3 li ul li:hover ul{ /* 第２階層・ホバー時 第３階層 */ display:block; /* 表示 */ left:140px;} /* 表示位置指定 */ li.list3 li ul li ul li:hover{ /* 第３階層・ホバー時 第３階層 */ position:absolute; /* 絶対配置 */ display:block;} /* 表示 */ /* 第２階層・ホバー時 第３階層 */ ul.list3 li ul li:hover ul li:first-child{ position:absolute; /* 絶対配置 */ top:-22px;} /* ２階層と同じ高さ位置に */ /* 第２階層・ホバー時 右端の第３階層メニュー */ .list3_box ul:last-child li ul li:hover ul{ left:-140px;} /* 左側に表示 */ |
事例３・ご利用にあたっての考慮点
- 行番
- 説明
- 3
- メニュー全体の横幅。（10行目の１メニュー幅）×（メニュー数）+ （メニュー数）＋１。
- 8
- display:inline-block;で出来る隙間を無くす記述。尚、事例４では、display:inline-block;を使い隙間をＣＳＳで調整
- 10
- １つのメニューの幅。
- 11
- メニューの高さ。emの指定も可。
- 33
- 10行目と同じ幅。第２と第３階層の間に隙間を取らないでこと。
- 39-41
- 第２階層ホバー時、第３階層をその横から表示。
- 44-45
- 右端の第３メニューを右側に表示。
注意事項：第２階層と第３階層の間に隙間を作ると、第３階層にマウスを横に移動すると、第３階層のメニューが消えてしまいます。空間をマウスが通過するとき、マウスホバー 状態が解除されるためです。
事例４・横型３階層 ２階層以下縦表示 修正
事例４・ＨＴＭＬ
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="y_menu_box"> <ul class="list"> <!-- 事例３と同じなので省略 --> </ul> <ul class="list"> <!-- 事例３と同じなので省略 --> </ul> <ul class="list"> <!-- 事例３と同じなので省略 --> </ul> </div> |
事例４・ＣＳＳ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/* ========== メニュー全体の設定 ========== */ .y_menu_box{ z-index:100; /* 記事が重なった時の優先度 */ width:96%; /* メニューの幅 */ position:relative; /* 相対配置 */ margin:0 auto; text-align:center;} /* 中央配置 */ .y_menu_box ul{ display:inline-block; /* 横並び設定 */ width:32.0%;} .y_menu_box ul li ul{width:32%;} .y_menu_box ul li ul li ul{ width:32%;} .y_menu_box ul li { text-align:center;} /* メニュー文字の中央配置 */ .list ul{ display: none;} /* 第２階層以下を非表示 */ .list li{ /* 各メニュー */ line-height:1.75em;} /* 高さ */ /* ===== 罫線の表示 ===== */ .list li{ border-bottom:1px solid #000;} /* 下罫線 */ .list li ul li:first-child{ /* 第２階層ホバー時 */ border-top:1px solid #000;} /* 第一階層下罫線消えるのを解消 */ .list li ul li:last-child{ /* 第２階層ホバー時 最終メニュー*/ border-bottom:none;} /* 下罫線の重複を解消 */ /* 第１階層メニュー１番目から２番目まで */ .y_menu_box ul:nth-child(n+1):nth-child(-n+2) li{ border-right:1px solid #000;} /* メニューの仕切り線 */ /* ===== inline-block による隙間を解消 ===== */ .list li{ /* 各メニュー */ margin-right:-4px;} /* 右にマイナス４ｐｘ */ .list li ul li ul li{margin-right:0px;} /* ========== マウスホバー時 各階層の表示制御 ========== */ /* ===== 第１階層ホバー → 第２階層表示 */ .list li:hover ul { position: absolute; display:block; } /* ===== 第１階層ホバー時 第３階層メニューを非表示 ===== */ .list li:hover ul li ul { position:relative; margin-left:0.4px; display:none;} /* ===== 第２階層ホバー時 第３階層表示 */ .list li ul li:hover ul{ width:100%; display:block;} /* ========== 背景色 ========== */ .list li{ /* 第１階層 初期表示*/ background-color:#d1e8ff;} /* 背景色*/ .list li:hover ul li{ /* 第１階層ホバー時 第２階層 */ background-color:#d1e8ff;} /* 背景色*/ .list li ul li:hover ul li { /* 第２階層ホバー時 第３階層 */ background-color:#e8ffd1;} /* 背景色*/ .list li ul li ul li:hover { /* 第３階層表ホバー時 第３階層 */ background-color:#ffeeaa;} /* 背景色*/ |
事例４・ご利用にあたっての考慮点
- 行番
- 説明
- 4
- メニュー表示領域内でのメニュー全体の幅のパーセント指定
- 10
- メニュー１つの幅を％指定。横メニューの数で変更が必須。（１００／メニュー数）で合計が９６前後の値
- 32-33
- メニューの横の仕切り線。横メニューの数で変更が必須。メニュー数が５個の場合、２つ目のnth-childは、(-n+4)。最初のnth-child(n+1)はそのまま。