親要素の幅が広がるとレイアウトが崩れてしまう

前提・実現したいこと

以下 3 種類の機能を持つメニュー

No	メニュー種類	メニュー数	caret ▼	カテゴリ	例
1	リンク	1	なし	なし	Home
2	メニュー	複数	あり	なし	Site A
3	メガメニュー	複数	あり	あり	Training

発生している問題・エラーメッセージ

親要素 (.Mheader) の文字数が多いと、親要素の背景色が子要素 (.Mcolumn) の以下 2 箇所に表示されてしまうレイアウト不具合を解消したい。

右側
上側

エラーメッセージ

該当のソースコード

html
1位置 : メニュー挿入前
2<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
3	<div id="DeltaHorizontalQuickLaunch" role="navigation">
4		<div class="ms-quicklaunchouter">
5			<div class="ms-quickLaunch">
6			</div>
7		</div>
8	</div>
9</div>
10位置 : メニュー挿入後

CSS
1body {margin:0;font-family:Arial}
2
3.topnav {
4  overflow: hidden;
5  background-color: #5A7FA2;
6}
7
8.topnav a {
9  float: left;
10  display: block;
11  color: #f2f2f2;
12  text-align: center;
13  padding: 14px 16px;
14  text-decoration: none;
15  font-size: 17px;
16}
17
18.active {
19  background-color: #4CAF50;
20  color: white;
21}
22
23.topnav .icon {
24  display: none;
25}
26
27.dropdown {
28  float: left;
29  overflow: hidden;
30}
31
32.dropdown .dropbtn {
33  font-size: 17px;    
34  border: none;
35  outline: none;
36  color: white;
37  padding: 14px 16px;
38  background-color: inherit;
39  font-family: inherit;
40  margin: 0;
41}
42
43.dropdown-content {
44  display: none;
45  position: absolute;
46  background-color: #f9f9f9;
47  min-width: 160px;
48  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
49  z-index: 1;
50}
51
52.dropdown-content a {
53  float: none;
54  color: black;
55  padding: 12px 16px;
56  text-decoration: none;
57  display: block;
58  text-align: left;
59}
60
61.topnav a:hover, .dropdown:hover .dropbtn {
62  background-color: #555;
63}
64
65.dropdown-content a:hover {
66  background-color: #ddd;
67  color: black;
68}
69
70.dropdown:hover .dropdown-content {
71  display: block;
72}
73
74/*MEGA-MENU*/
75* {
76  box-sizing: border-box;
77}
78
79.Mnavbar {
80  overflow: hidden;
81  background-color: #333;
82  font-family: Arial, Helvetica, sans-serif;
83}
84
85.Mnavbar a {
86  float: left;
87  font-size: 16px;
88  color: white;
89  text-align: center;
90  padding: 14px 16px;
91  text-decoration: none;
92}
93
94.Mdropdown {
95  float: left;
96  overflow: hidden;
97}
98
99.Mdropdown .Mdropbtn {
100  font-size: 16px;  
101  border: none;
102  outline: none;
103  color: white;
104  padding: 14px 16px;
105  background-color: inherit;
106  font: inherit;
107  margin: 0;
108}
109
110.Mnavbar a:hover, .Mdropdown:hover .Mdropbtn {
111  background-color: #555;
112}
113
114.Mdropdown-content {
115  display: none;
116  position: absolute;
117  background-color: #f9f9f9;
118  width: 100%;
119  left: 0;
120  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
121  z-index: 1;
122}
123
124.Mdropdown-content .Mheader {
125  float: left;
126  background: #555;
127  padding: 16px;  
128  color: white;
129}
130
131.Mdropdown:hover .Mdropdown-content { 
132  display: block;
133}
134
135/* Create three equal columns that floats next to each other */
136.Mcolumn {
137  margin: 0 -16px -16px;  
138  float: left;
139  padding: 10px;
140  background-color: #ccc;
141  height: 250px;
142}
143
144.Mcolumn a {
145  float: none;
146  color: black;
147  padding: 16px;
148  text-decoration: none;
149  display: block;
150  text-align: left;
151}
152
153.Mcolumn a:hover {
154  background-color: #ddd;
155}
156
157.Mheader:hover {
158  color: orange;
159}
160
161/* Clear floats after the columns */
162.Mrow:after {
163  content: "";
164  display: table;
165  clear: both;
166}

JavaScript
1let myMockListData = [
2	{
3		URL: "/siteA.aspx",
4		URLNAME: "Home",
5		dropDown: "no",
6		id: "home"
7	},
8	{
9		URL: "/siteA.aspx",
10		URLNAME: "Site A",
11		dropDown: "yes",
12		id: "SiteA"
13	},
14	{
15		URL: "/siteE.aspx",
16		URLNAME: "Training",
17		dropDown: "training",
18		id: "Training"
19	}
20];
21
22var subList = [
23	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
24	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
25	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
26	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
27];
28
29var megaMenuCategory = [
30	{ category: "DT", url: "www.gmail.com" },
31	{ category: "親要素の文字数が多いとレイアウトが崩れる", url: "www.gmail.com" },
32	{ category: "IT", url: "www.gmail.com" }
33];
34
35var categoryMenu = [
36	{ category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" },
37	{ category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" },
38	{ category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },
39	{ category: "親要素の文字数が多いとレイアウトが崩れる", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },
40	{ category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },
41	{ category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" }
42];
43
44createNavigation(myMockListData);
45
46function myFunction() {
47	var x = document.getElementById("myTopnav");
48	if (x.className === "topnav") {
49		x.className += " responsive";
50	} else {
51		x.className = "topnav";
52	}
53}
54
55function createNavigation(navData) {
56    var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");
57	headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></div>');
58	var topNav = document.getElementById("myTopnav");
59	for (var x = 0; x < navData.length; x++) {
60		if (navData[x].dropDown === "no") {
61			var aLink = _createEl("a");
62			var aTextNode = document.createTextNode(navData[x].URLNAME);
63			aLink.href = navData[x].URL;
64			aLink.appendChild(aTextNode);
65			topNav.appendChild(aLink);
66		} else if (navData[x].dropDown === "yes") {
67			var buildSubNavigation;
68			buildSubNavigation = buildSubNavBar(navData[x].id);
69			topNav.appendChild(buildSubNavigation);
70		} else {
71			//build megamenu
72			var buildSubNavigation;
73			buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
74		}
75	}
76}
77
78function buildDirectorateMegaMenu(navDataID) {
79	var buildNav;
80	var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");
81	var topNav = document.getElementById("myTopnav");
82	buildNav = buildSubNavBar(navDataID, "training");  //Build mega menu and attach in buildSubNavBar()
83	headerElement.appendChild(buildNav);
84	topNav.appendChild(buildNav);
85}
86
87function buildSubNavBar(subNavID, isDirectorate) {
88    //create div and add dropdown class
89    var ddDiv = _createEl("div");
90    if(isDirectorate === "training"){
91        ddDiv.classList.add("Mdropdown");
92    }else{
93        ddDiv.classList.add("dropdown");
94    }
95    //create button and add text
96    var btn = _createEl("button");
97    if(isDirectorate === "training"){
98        btn.classList.add("Mdropbtn");
99    }else{
100        btn.classList.add("dropbtn");
101    }
102    var btnText = document.createTextNode(subNavID);
103    //append the text to the button
104    btn.appendChild(btnText);
105
106    //create i tag and add "fa fa-caret-down" classes
107    var itag = _createEl("i");
108    itag.classList.add("fa");
109    itag.classList.add("fa-caret-down");
110    itag.classList.add("fa-fw");
111    btn.appendChild(itag);
112    ddDiv.appendChild(btn);
113
114    var ddContent = _createEl("div");
115    ddContent.classList.add("dropdown-content");
116    for (var i = 0; i < subList.length; i++) {
117        if (subList[i].id === subNavID  && subList[i].id !== "Training") {
118            var li = _createEl("li");
119            var a = _createEl("a");
120            var aTextNode = document.createTextNode(subList[i].URLNAME);
121
122            a.href = subList[i].subURL;
123            a.appendChild(aTextNode);
124            ddContent.appendChild(a);  
125        }
126    }
127  
128    if(isDirectorate === "training"){
129        //alert("I ");
130        //create div and add dropdown class
131        var megaDivDropDown = _createEl("div");
132        megaDivDropDown.classList.add("dropdown");
133
134        var megaBtn = _createEl("button");
135        megaBtn.classList.add("dropbtn");
136
137        megaDivDropDown.appendChild(megaBtn);
138        var megaI = _createEl("i");
139        megaI.classList.add("fa");
140        megaI.classList.add("fa-caret-down");
141        megaBtn.appendChild(megaI);
142
143        var megaDDivContent = _createEl("div");
144        megaDDivContent.classList.add("Mdropdown-content");
145
146        //Loop through categories & sub-categories items
147        for (var i = 0; i < megaMenuCategory.length; i++) {
148
149        var headerDiv = _createEl("div");
150        headerDiv.classList.add("Mheader");
151
152        var megaH2 = _createEl("h2");
153        megaH2.appendChild(document.createTextNode(megaMenuCategory[i].category));
154        headerDiv.appendChild(megaH2);
155
156        var megaDDivRow = _createEl("div");
157        megaDDivRow.classList.add("Mrow");
158
159            var megaDivCol = _createEl("div");
160            megaDivCol.classList.add("Mcolumn");
161            var colHr = _createEl("h3");
162            colHr.appendChild(document.createTextNode(""));
163            megaDivCol.appendChild(colHr);
164            for (var x = 0; x < categoryMenu.length; x++) {
165                if (megaMenuCategory[i].category === categoryMenu[x].category) {
166                    var colAnchor = _createEl("a");
167                    colAnchor.href = categoryMenu[x].menuUrl;
168                    colAnchor.appendChild(document.createTextNode(categoryMenu[x].menuItem));
169
170                    megaDivCol.appendChild(colAnchor);
171                    megaDDivRow.appendChild(megaDivCol);
172                    headerDiv.appendChild(megaDDivRow);
173                    megaDDivContent.appendChild(headerDiv);
174                    ddDiv.appendChild(megaDDivContent);
175                }
176            }
177            console.log("megaDdivRow:");
178            console.log(ddDiv);
179        }
180    }
181    ddDiv.appendChild(ddContent);
182    return ddDiv;
183}    
184function _createEl(el) {
185	return document.createElement(el);
186}
187

試したこと

.Mcolumn からの float:left; 除去で左側は解消。上部 / 下部のレイアウト崩れは依然残る。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

int32_t

2023/05/16 09:46

「親要素の文字」とは「HR」の部分のことでしょうか?

yambejp

2023/05/16 09:51 編集

どこから持ってきたソースかわかりませんが、ぐっちゃんぐっちゃんで小手先でなにかやっても根本的な解決はむずかしそうな気がします。とりあえずtableとfloatを混在させるのはさすがに悪手かと。

BetterEveryday

2023/05/16 10:35

int32_t さま、ご確認ありがとうございます。表示された背景色 (親) は .Mheader の div 要素と考えています。親要素、子要素を特定する記述を「発生している問題」へ追加しました。どうぞよろしくお願いいたします。

BetterEveryday

2023/05/16 11:27 編集

yambejp さま、ご助言ありがとうございます。CSS の理解が浅く、根本的な改造、 table と float の混在を解消することも、現状の私には至難の技です。このソースの元ネタは以下であり、 https://sharepoint.stackexchange.com/questions/276268/navigation-with-megamenu-in-sharepoint-2016 私には必要な以下へ追加変更しています。 - 指定位置への Html コード挿入 - 複数のメガメニューを個別表示簡易版、dropdown 1 種類はコチラになります。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_mega_menu_responsive 数年来実現したいと思っていた問題に対する、英語圏から見つけた貴重な解決策で、私としてはなんとか希望するレイアウトへ変更できれば、と一縷の望みをかけております。なにとぞどうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、.Mcolumn のルールセットにある float: left; を消せばよいんじゃないでしょうか。

ここで float を使う意味がわかりませんし、.Mdropdown-content は display: table か display: grid にすべきでしょう。

投稿2023/05/16 22:10

int32_t

総合スコア20872

BetterEveryday

2023/05/17 00:11 編集

int32_t さま、ご検討ありがとうございます。 .Mcolumn から float:left; を除去しても変化はありませんでした。 .Mdropdown-content : none を変更してしまうと、メガ指定していない (myMockListData で dropDown = no や yes の) メニューまでメガメニューになってしまいます。実現したいことに 3 種類のメニューがあることを追加しました。なにとぞどうぞよろしくお願いいたします。

BetterEveryday

2023/05/22 16:40 編集

int32_t さま、申し訳ございません。教示いただいた、.Mcolumn から float:left; 除去を再度試したところ、左側のレイアウト崩れを解消できました。上部/下部にレイアウト崩れが残る状態につきまして、「試したこと」に画像を追加しましたが、実運用環境 SharePoint では現象発生せず、これ以上の対応は不要のようですので、この質問は解決済みにしようと思います。周りに相談できる開発者がいない環境の中で、自分ではどうしようもなく、半ば諦めていた中での、ダメ元での投稿でしたので、たいへん助かりました。私の問題解決のために貴重なお時間とお気持ちを、助けていただきましてどうもありがとうございました。

行動規範の内容に同意します