teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問親要素の幅が広がるとレイアウトが崩れてしまう

編集履歴

質問編集履歴

5

追加 : 試したこと (int32_t さまからのご回答、.Mcolumn からの float:left; 除去)

2023/05/22 14:47

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -253,7 +253,6 @@
253
253
  }
254
254
 
255
255
  function createNavigation(navData) {
256
- // var headerElement = document.querySelector('#DeltaPlaceHolderPageHeader');
257
256
  var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");
258
257
  headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></div>');
259
258
  var topNav = document.getElementById("myTopnav");
@@ -388,9 +387,8 @@
388
387
 
389
388
  ```
390
389
  ### 試したこと
391
-
392
- ここに問題に対して試したことを記載してください。
390
+ .Mcolumn からの float:left; 除去で左側は解消。上部 / 下部のレイアウト崩れは依然残る。
393
-
391
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-22/73fb5123-d5c2-4174-a635-58f7df1921e1.png)
394
392
  ### 補足情報（FW/ツールのバージョンなど）
395
393
 
396
394
  ここにより詳細な情報を記載してください。
JavaScriptHTMLCSS

4

更新 : JavaScript (コード文字数削減)

2023/05/17 00:30

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,5 @@
1
1
  ### 前提・実現したいこと
2
+ 以下 3 種類の機能を持つメニュー
2
3
  |No|メニュー種類|メニュー数|caret ▼|カテゴリ|例|イメージ|
3
4
  |:--|:--:|:--:|:--:|:--:|:--:|--:|
4
5
  |1|リンク|1|なし|なし|Home|![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-17/4088c4d0-a205-45bb-bb70-60166ce0b017.png)|
@@ -211,12 +212,6 @@
211
212
  id: "SiteA"
212
213
  },
213
214
  {
214
- URL: "/siteB.aspx",
215
- URLNAME: "Site B",
216
- dropDown: "no",
217
- id: "siteB"
218
- },
219
- {
220
215
  URL: "/siteE.aspx",
221
216
  URLNAME: "Training",
222
217
  dropDown: "training",
@@ -228,11 +223,12 @@
228
223
  { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
229
224
  { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
230
225
  { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
226
+ { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
231
227
  ];
232
228
 
233
229
  var megaMenuCategory = [
234
230
  { category: "DT", url: "www.gmail.com" },
235
- { category: "HR", url: "www.gmail.com" },
231
+ { category: "親要素の文字数が多いとレイアウトが崩れる", url: "www.gmail.com" },
236
232
  { category: "IT", url: "www.gmail.com" }
237
233
  ];
238
234
 
@@ -240,7 +236,7 @@
240
236
  { category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" },
241
237
  { category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" },
242
238
  { category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },
243
- { category: "HR", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },
239
+ { category: "親要素の文字数が多いとレイアウトが崩れる", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },
244
240
  { category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },
245
241
  { category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" }
246
242
  ];
@@ -343,7 +339,6 @@
343
339
  var megaI = _createEl("i");
344
340
  megaI.classList.add("fa");
345
341
  megaI.classList.add("fa-caret-down");
346
-
347
342
  megaBtn.appendChild(megaI);
348
343
 
349
344
  var megaDDivContent = _createEl("div");
@@ -365,8 +360,7 @@
365
360
  var megaDivCol = _createEl("div");
366
361
  megaDivCol.classList.add("Mcolumn");
367
362
  var colHr = _createEl("h3");
368
- var colHrText = document.createTextNode("");
363
+ colHr.appendChild(document.createTextNode(""));
369
- colHr.appendChild(colHrText);
370
364
  megaDivCol.appendChild(colHr);
371
365
  for (var x = 0; x < categoryMenu.length; x++) {
372
366
  if (megaMenuCategory[i].category === categoryMenu[x].category) {
@@ -391,6 +385,7 @@
391
385
  function _createEl(el) {
392
386
  return document.createElement(el);
393
387
  }
388
+
394
389
  ```
395
390
  ### 試したこと
396
391
 
JavaScriptHTMLCSS

3

追加 : 実現したいこと (3 種類のメニュー)

2023/05/17 00:09

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,9 @@
1
1
  ### 前提・実現したいこと
2
+ |No|メニュー種類|メニュー数|caret ▼|カテゴリ|例|イメージ|
3
+ |:--|:--:|:--:|:--:|:--:|:--:|--:|
2
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-16/c8a9de0a-335b-4c67-9141-44f2c40dc14d.png)
4
+ |1|リンク|1|なし|なし|Home|![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-17/4088c4d0-a205-45bb-bb70-60166ce0b017.png)|
3
-
5
+ |2|メニュー|複数|あり|なし|Site A|![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-17/a29a21ba-19c2-4de1-ae97-b206c4097b24.png)|
6
+ |3|メガメニュー|複数|あり|あり|Training|![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-17/cfb37b3b-6663-49d9-aef7-6aa707fcbc49.png)|
4
7
 
5
8
  ### 発生している問題・エラーメッセージ
6
9
  親要素 (.Mheader) の文字数が多いと、親要素の背景色が子要素 (.Mcolumn) の以下 2 箇所に表示されてしまうレイアウト不具合を解消したい。
@@ -16,7 +19,7 @@
16
19
  ```html
17
20
  位置 : メニュー挿入前
18
21
  <div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
19
- <div id="DeltaHorizontalQuickLaunch" class="ms-core-navigation ms-belltown-quicklaunch" role="navigation">
22
+ <div id="DeltaHorizontalQuickLaunch" role="navigation">
20
23
  <div class="ms-quicklaunchouter">
21
24
  <div class="ms-quickLaunch">
22
25
  </div>
@@ -223,12 +226,8 @@
223
226
 
224
227
  var subList = [
225
228
  { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
226
- { subURL: "/site/c", id: "SiteC", URLNAME: "Site C" },
227
229
  { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
228
230
  { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
229
- { subURL: "/site/c", id: "SiteC", URLNAME: "Site C" },
230
- { subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
231
- { subURL: "/site/c", id: "SiteC", URLNAME: "Site C" }
232
231
  ];
233
232
 
234
233
  var megaMenuCategory = [
@@ -283,7 +282,6 @@
283
282
 
284
283
  function buildDirectorateMegaMenu(navDataID) {
285
284
  var buildNav;
286
- // var headerElement = document.querySelector('#DeltaPlaceHolderPageHeader');
287
285
  var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");
288
286
  var topNav = document.getElementById("myTopnav");
289
287
  buildNav = buildSubNavBar(navDataID, "training"); //Build mega menu and attach in buildSubNavBar()
@@ -358,9 +356,7 @@
358
356
  headerDiv.classList.add("Mheader");
359
357
 
360
358
  var megaH2 = _createEl("h2");
361
- var h2Text = document.createTextNode(megaMenuCategory[i].category);
359
+ megaH2.appendChild(document.createTextNode(megaMenuCategory[i].category));
362
-
363
- megaH2.appendChild(h2Text);
364
360
  headerDiv.appendChild(megaH2);
365
361
 
366
362
  var megaDDivRow = _createEl("div");
@@ -376,8 +372,7 @@
376
372
  if (megaMenuCategory[i].category === categoryMenu[x].category) {
377
373
  var colAnchor = _createEl("a");
378
374
  colAnchor.href = categoryMenu[x].menuUrl;
379
- var menuColText = document.createTextNode(categoryMenu[x].menuItem);
375
+ colAnchor.appendChild(document.createTextNode(categoryMenu[x].menuItem));
380
- colAnchor.appendChild(menuColText);
381
376
 
382
377
  megaDivCol.appendChild(colAnchor);
383
378
  megaDDivRow.appendChild(megaDivCol);
JavaScriptHTMLCSS

2

追加 : 要素特定 (親 - .Mheader, 子 - .Mcolumn)

2023/05/16 10:31

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
 
5
5
  ### 発生している問題・エラーメッセージ
6
- 親要素の文字数が多いと、親要素の背景色が子要素の以下 2 箇所に表示されてしまうレイアウト不具合を解消したい。
6
+ 親要素 (.Mheader) の文字数が多いと、親要素の背景色が子要素 (.Mcolumn) の以下 2 箇所に表示されてしまうレイアウト不具合を解消したい。
7
7
  - [ ] 右側
8
8
  - [ ] 上側
9
9
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-16/0c6f2824-b562-4404-ba67-35819f6deec7.png)
JavaScriptHTMLCSS

1

削除 : データ列挙不要カンマ (megaMenuCategory , categoryMenu )

2023/05/16 09:30

投稿

BetterEveryday
BetterEveryday

スコア19

test CHANGED
File without changes
test CHANGED
@@ -234,7 +234,7 @@
234
234
  var megaMenuCategory = [
235
235
  { category: "DT", url: "www.gmail.com" },
236
236
  { category: "HR", url: "www.gmail.com" },
237
- { category: "IT", url: "www.gmail.com" },
237
+ { category: "IT", url: "www.gmail.com" }
238
238
  ];
239
239
 
240
240
  var categoryMenu = [
@@ -243,7 +243,7 @@
243
243
  { category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },
244
244
  { category: "HR", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },
245
245
  { category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },
246
- { category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" },
246
+ { category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" }
247
247
  ];
248
248
 
249
249
  createNavigation(myMockListData);
JavaScriptHTMLCSS