横並びできない画面幅で、縦に並んだバラバラのドロップダウンメニュー幅を揃えるには?

実現したいこと

前提 No.3 のメニューに対して、【画面幅が小さい場合に】同じ幅で縦に整列したい。

前提

No	階層	位置	幅広画面並び	幅狭画面並び	例	親要素	子要素
1	1	-	-	-	Home	-	-
2	2	真下	縦	縦	Site A	.dropdown-content	リンク
3	3	真下	横	縦	Training	↑同上	.header
4	3	左端	横	縦	↑同上	.Mdropdown-content	↑同上

発生している問題

【画面幅が小さい場合に】

横並びと縦並びが混在してしまう
バラバラな幅になってしまう

該当のソースコード

html
1<div id="suiteBarDelta"></div>

CSS
1body {margin:0;}
2.topnav {
3  overflow: hidden;
4  background-color: #5A7FA2;
5}
6
7.topnav a {
8  float: left;
9  display: block;
10  color: #f2f2f2;
11  text-align: center;
12  padding: 14px 16px;
13  text-decoration: none;
14  font-size: 17px;
15}
16
17.active {
18  background-color: #4CAF50;
19  color: white;
20}
21
22.topnav .icon {
23  display: none;
24}
25
26.dropdown {
27  float: left;
28  overflow: hidden;
29}
30
31.dropdown .dropbtn {
32  font-size: 17px;    
33  border: none;
34  outline: none;
35  color: white;
36  padding: 14px 16px;
37  background-color: inherit;
38  font-family: inherit;
39  margin: 0;
40}
41
42.dropdown-content {
43  display: none;
44  position: absolute;
45  background-color: #f9f9f9;
46  min-width: 160px;
47  left: auto;
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  left: 0;
119  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
120  z-index: 1;
121}
122
123.header {
124  float: left;
125  background: #555;
126  padding: 16px;  
127  color: white;
128  overflow: hidden;
129}
130
131.header h2 {
132  padding: 16px;
133  color: white;
134}
135
136.Mdropdown:hover .Mdropdown-content { 
137  display: block;
138}
139
140.column {
141  margin: 0 -16px -16px;
142  padding: 10px;
143  background-color: #ccc;
144  height: 250px;
145}
146
147.column a {
148  float: none;
149  color: black;
150  padding: 16px;
151  text-decoration: none;
152  display: block;
153  text-align: left;
154}
155
156.column a:hover {
157  background-color: #ddd;
158}
159
160.header:hover h2 {
161  color: orange;
162}
163
164/* Clear floats after the columns */
165.row:after {
166  content: "";
167  display: table;
168  clear: both;
169}
170

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

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

回答1件

float: left;による横並びは古い手法ですのでやめましょう。自由度が低いし、デメリットが多いです。
今なら flex を使うのがいいでしょう。

とりあえず下記の部分を修正すれば折り返したとき各メニューの幅はそろいます。

css
1.dropdown:hover .dropdown-content {
2/*  display: block;  下記に修正 */
3  display: flex;  /* 子要素を横並べ */
4  flex-wrap: wrap; /* 折り返し許可 */
5}
6
7
8.header {
9/*  float: left;  削除 */
10  background: #555;
11  padding: 16px;  
12  color: white;
13  overflow: hidden;
14  flex-grow: 1; /* 追加  幅を拡張する　*/
15}
16
17
18/* flexの場合は、下記のクリア処理は不要 
19.row:after {
20  content: "";
21  display: table;
22  clear: both;
23} 
24*/

他の float: left; の横並びも flex によるレイアウトに修正した方がいいでしょう。

投稿2023/05/27 18:46

hatena19

総合スコア34075

BetterEveryday

2023/05/27 23:00 編集

hatena19 さま、ご検討ありがとうございます。いただたきましたコードにて、当該メニューについては幅広画面では横並びしつつ、折り返してしまう幅狭画面では同一幅での縦並びを実現できました。しかしながら、.dropdown-content の flex への変更や .header から float:left を除去してしまうと、他のメニューの並びも幅広画面であっても変化してしまいます。例 1. myMockListData で dropDown = "MegaMenu" のメニューが縦並びになってしまう例 2. myMockListData で dropDown = "yes" の 2 階層メニューが横並びになってしまう前提に 4 種類のメニューがあることを追加しました。なにとぞどうぞよろしくお願いいたします。

hatena19

2023/05/28 01:28

とりあえず下記にサンプルを置いておきます。 https://codepen.io/hatena19/pen/zYmXjrJ これでご希望と異なる部分があるのならは、この複雑なJSを解析してお望みの仕様を実現するのをボランティアでするはきついので、まずは自力でできるとこまでやってみて、そこで行き詰ったら再質問されてはどうでしょう。

BetterEveryday

2023/05/28 06:04 編集

hatena19 さま、他のメニューへの余波にも対応いただきましてどうもありがとうございます。自分でも「他の float : left; の横並びも flex によるレイアウトに修正」を試していたのですが、 flex-direction: column; に辿り着くことができませんでした。残る問題は、画面幅によって縦横の並びが混在することです。子要素の最大幅に合わせるためには、たとえば、JavaScript にて最長文字列の要素幅を取得し、全兄弟要素に同じ幅を設定する、という対応がありえるのか、試してみようと思います。

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