前提・実現したいこと
以下 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()">☰</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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

回答1件
あなたの回答
tips
プレビュー