CSSで作成する縦型と横型各々2種のドロップダウンメニュー・
リスト形式(ulとli)で表示し、ドロップダウンメニューはCSSの表示、非表示を利用。
- 概要
事例1
縦型2階層
- 2階層目は、1階層目の下に表示。縦型なので、サイドメニュー向き。2階層目を表示するとその高さ分、下の記事が下方に動く。このタイプはCSSが厄介。修正
事例2
縦型2階層
- 2階層目は、1階層目の横に表示。2階層目が横表示で、右に記事があるとメニューが記事の上に重なる。右メニュー分の幅(記事があっても良い)が無いと、ページ領域内からはみ出す。
事例3
横型3階層
- 3階層まで表示。2階層目メニューは、1階層目の下に表示し、3階層目は、2階層目の右に表示。右端のメニューは、3階層目が画面からはみ出すので第3階層を左に表示。 修正
事例4
横型3階層
- 2階層以下を縦1列に3階層まで表示できる横型メニュー。メニュー幅を%指定なので、レスポンシブウェッブに最適です。お薦めのモデル。
事例1 説明位置へ
事例2 説明位置へ
事例4 説明位置へ
注意点:事例2と3は、横に表示しているため画面が小さくなると表示出来なくなる問題があり、スマホ、タブレットに対応できない状態になります、その対応について、
1.メディアクエリー(以下、MQと略)で横に表示するメニューを非表示にする。親メニューには、必ずリンクが必要。
当サイトでは、この仕様となっている。
2.MQで横表示を縦表示に変える。縦にした時、メニュー数が多い場合とても使いずらい。
3.ヘッダー部の中に縦型のメニューにして組み込む。 追記
マウス・カーソル:マウスが重なった時、カーソル形状を変えたい場合(事例1の場合)
追記
1.各メニューの親ボックス(divタグ)にクラスを一つ追加
1 |
<div class="list1_box csl_ptr"> |
2.CSSに以下を追加
1 |
.csl_ptr ul li {cursor:pointer;} |
共通のCSS
1 2 3 4 |
a {text-decoration:none;} ul, li {list-style-type: none; margin: 0; padding: 0;} |
事例1・縦型 下に表示 修正
事例1・HTML
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"> <!-- 親メニューA 全体域 --> <li><a title="メニューA">メニューA</a> <!-- 親メニューA 表示 --> <ul> <!-- A 子メニュー全体域 --> <li><a title="メニューA-1">メニューA-1</a></li> <!-- A 子メニューA-1 --> <li><a title="メニューA-2">メニューA-2</a></li> <!-- A 子メニューA-2 --> <li><a title="メニューA-3">メニューA-3</a></li> <!-- A 子メニューA-3 --> </ul> <!-- A 子メニュー全体域 終了--> </li> <!-- 親メニューA 表示 終了 --> </ul> <!-- 親メニューA 全体域 終了 --> <ul class="list1"> <li><a title="メニューB">メニューB</a> <ul> <li><a title="メニューB-1">メニューB-1</a></li> <li><a title="メニューB-2">メニューB-2</a></li> <li><a title="メニューB-3">メニューB-3</a></li> </ul> </li> </ul> <ul class="list1"> <li><a title="メニューC">メニューC</a> <ul> <li><a title="メニューC-1">メニューC-1</a></li> <li><a title="メニューC-2">メニューC-2</a></li> <li><a title="メニューC-3">メニューC-3</a></li> <li><a title="メニューC-4">メニューC-4</a></li> </ul> </li> </ul> </div> |
事例1・CSS
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{ /* 親メニュー ホバー時・子メニュー 1番目 */ 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;} /* 左罫線 */ |
事例1・ご利用にあたっての考慮点
- 行番
- 説明
- 2
- メニューの幅
- 4
- メニューの高さ。heightの指定ではデザインが崩れる。
- 17-18
- 左罫線の重複を解除。
- 31-32
- 左罫線。17-18行目で罫線の重複を無くしているので、最後に罫線を復活。
事例2・縦型 真横に表示 修正
事例2・HTML
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="メニューX">メニューX</a> <ul> <!-- 子メニュー 事例1と同じパターンなので、省略 --> </ul> </li> </ul> <ul class="list2"> <li><a title="メニューY">メニューY</a> <ul> <!-- 子メニュー 事例1と同じパターンなので、省略 --> </ul> </li> </ul> <ul class="list2"> <li><a title="メニューZ">メニューZ</a> <ul> <!-- 子メニュー 事例1と同じパターンなので、省略 --> </ul> </li> </ul> </div> |
事例2・CSS
事例2では、子メニューの修飾は省略しています。子メニューを横に表示するタイプは、レスポンシブ・サイトの場合、デザイン上ちょっと工夫が必要です。CSSで子メニューの左位置(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;} /* 背景色 */ |
事例3・横型3階層 修正
事例3・HTML
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"> <!-- 第1階層 1番目メニュー全体 -->lt;li><a title="Menu-A">Menu-A</a> <!-- 第1階層メニュー1番目 第2階層以下を入れ子に --> <ul> <!-- 第2階層のメニュー全体 --> <li><a title="A-1">Menu-A-1</a> <!-- 第2階層メニュー1番目 第3階層を入れ子に --> <ul> <!-- 第3階層のメニュー全体 --> <li><a title="A-1-1">Menu-A-1-1</a></li> <!-- 第3階層メニュー1 --> <li><a title="A-1-2">Menu-A-1-2</a></li> <!-- 2 --> <li><a title="A-1-3">Menu-A-1-3</a></li> <!-- 3 --> </ul> <!-- 第3階層のメニュー 終了 --> </li> <!-- 第2階層メニュー 1番目終了 --> <li><a title="A-2">Menu-A-2</a> <!-- 第2階層メニュー2番目 第3階層を入れ子に --> <ul> <li><a title="A-2-1">Menu-A-2-1</a></li> <li><a title="A-2-2">Menu-A-2-2</a></li> <li><a title="A-2-3">Menu-A-2-3</a></li> </ul> </li> <!-- 第2階層メニュー2番目 終了 --> <li><a title="A-3">Menu-A-3</a> <!-- 第2階層メニュー3番目 第3階層を入れ子に --> <ul> <li><a title="A-3-1">Menu-A-3-1</a></li> <li><a title="A-3-2">Menu-A-3-2</a></li> <li><a title="A-3-3">Menu-A-3-3</a></li> <li><a title="A-3-4">Menu-A-3-4</a></li> </ul> </li> <!-- 第2階層メニュー3番目 終了 --> </ul> <!-- 第2階層のメニュー全体 終了 --> </li> <!-- 第1階層メニュー1番目 終了 --> </ul> <!-- 第1階層 1番目メニュー全体 終了 --> <ul class="list3"> <!-- 第1階層2番目メニュー以下 1番目と同じパターンなので省略 --> </ul> <ul class="list3"> <!-- 第1階層3番目メニュー以下 1番目と同じパターンなので省略 --> </ul> </div> <!-- メニュー全体のボックス 終了--> |
事例3・CSS
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 |
/* ============== 事例3・メニュー全体の設定 ============== */ .list3_box{ /* メニュー全体のボックス */ z-index:20; /* 記事が重なった時の優先度 */ max-width:480px; /* メニューの幅 */ margin:0 auto;} /* 中央配置 */ .list3 { /* 第1階層~第3階層を含む3個のメニュー */ position:relative; /* 相対配置 */ display:table-cell;} /* 横型リストの隙間を出さない */ .list3 li { /* 第1階層~第3階層を含む3個のメニュー・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 { /* 第2階層以下 */ display: none;} /* 非表示 */ /* ============== マウスホバー時の設定 ============== */ .list3 li:hover { /* 第1階層・ホバー時 第1階層*/ background-color:#ffc;} /* 背景色 */ .list3 li ul li:hover ul li { /* 第2階層・ホバー時 第1、第2階層*/ background-color:#ffc;} /* 背景色 */ ul.list3 li:hover ul { /* 第1階層・ホバー時 第2階層 */ display:block;} /* 表示 */ ul.list3 li:hover ul li ul { /* 第2階層・ホバー時 第3階層 */ display:none;} /* 非表示 */ ul.list3 li ul li:hover ul{ /* 第2階層・ホバー時 第3階層 */ display:block; /* 表示 */ left:140px;} /* 表示位置指定 */ li.list3 li ul li ul li:hover{ /* 第3階層・ホバー時 第3階層 */ position:absolute; /* 絶対配置 */ display:block;} /* 表示 */ /* 第2階層・ホバー時 第3階層 */ ul.list3 li ul li:hover ul li:first-child{ position:absolute; /* 絶対配置 */ top:-22px;} /* 2階層と同じ高さ位置に */ /* 第2階層・ホバー時 右端の第3階層メニュー */ .list3_box ul:last-child li ul li:hover ul{ left:-140px;} /* 左側に表示 */ |
事例3・ご利用にあたっての考慮点
- 行番
- 説明
- 3
- メニュー全体の横幅。(10行目の1メニュー幅)×(メニュー数)+ (メニュー数)+1。
- 8
- display:inline-block;で出来る隙間を無くす記述。尚、事例4では、display:inline-block;を使い隙間をCSSで調整
- 10
- 1つのメニューの幅。
- 11
- メニューの高さ。emの指定も可。
- 33
- 10行目と同じ幅。第2と第3階層の間に隙間を取らないでこと。
- 39-41
- 第2階層ホバー時、第3階層をその横から表示。
- 44-45
- 右端の第3メニューを右側に表示。
注意事項:第2階層と第3階層の間に隙間を作ると、第3階層にマウスを横に移動すると、第3階層のメニューが消えてしまいます。空間をマウスが通過するとき、マウスホバー 状態が解除されるためです。
事例4・横型3階層 2階層以下縦表示 修正
事例4・HTML
1 2 3 4 5 6 7 8 9 10 11 |
<div class="y_menu_box"> <ul class="list"> <!-- 事例3と同じなので省略 --> </ul> <ul class="list"> <!-- 事例3と同じなので省略 --> </ul> <ul class="list"> <!-- 事例3と同じなので省略 --> </ul> </div> |
事例4・CSS
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;} /* 第2階層以下を非表示 */ .list li{ /* 各メニュー */ line-height:1.75em;} /* 高さ */ /* ===== 罫線の表示 ===== */ .list li{ border-bottom:1px solid #000;} /* 下罫線 */ .list li ul li:first-child{ /* 第2階層ホバー時 */ border-top:1px solid #000;} /* 第一階層下罫線消えるのを解消 */ .list li ul li:last-child{ /* 第2階層ホバー時 最終メニュー*/ border-bottom:none;} /* 下罫線の重複を解消 */ /* 第1階層メニュー1番目から2番目まで */ .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;} /* 右にマイナス4px */ .list li ul li ul li{margin-right:0px;} /* ========== マウスホバー時 各階層の表示制御 ========== */ /* ===== 第1階層ホバー → 第2階層表示 */ .list li:hover ul { position: absolute; display:block; } /* ===== 第1階層ホバー時 第3階層メニューを非表示 ===== */ .list li:hover ul li ul { position:relative; margin-left:0.4px; display:none;} /* ===== 第2階層ホバー時 第3階層表示 */ .list li ul li:hover ul{ width:100%; display:block;} /* ========== 背景色 ========== */ .list li{ /* 第1階層 初期表示*/ background-color:#d1e8ff;} /* 背景色*/ .list li:hover ul li{ /* 第1階層ホバー時 第2階層 */ background-color:#d1e8ff;} /* 背景色*/ .list li ul li:hover ul li { /* 第2階層ホバー時 第3階層 */ background-color:#e8ffd1;} /* 背景色*/ .list li ul li ul li:hover { /* 第3階層表ホバー時 第3階層 */ background-color:#ffeeaa;} /* 背景色*/ |
事例4・ご利用にあたっての考慮点
- 行番
- 説明
- 4
- メニュー表示領域内でのメニュー全体の幅のパーセント指定
- 10
- メニュー1つの幅を%指定。横メニューの数で変更が必須。(100/メニュー数)で合計が96前後の値
- 32-33
- メニューの横の仕切り線。横メニューの数で変更が必須。メニュー数が5個の場合、2つ目のnth-childは、(-n+4)。最初のnth-child(n+1)はそのまま。