質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

434閲覧

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

BetterEveryday

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/05/16 09:22

編集2023/05/22 14:47

前提・実現したいこと

以下 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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 数年来実現したいと思っていた問題に対する、英語圏から見つけた貴重な解決策で、 私としてはなんとか希望するレイアウトへ変更できれば、と一縷の望みをかけております。 なにとぞどうぞよろしくお願いいたします。
guest

回答1

0

ベストアンサー

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

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

投稿2023/05/16 22:10

int32_t

総合スコア21207

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 では現象発生せず、 これ以上の対応は不要のようですので、 この質問は解決済みにしようと思います。 周りに相談できる開発者がいない環境の中で、自分ではどうしようもなく、 半ば諦めていた中での、ダメ元での投稿でしたので、たいへん助かりました。 私の問題解決のために貴重なお時間とお気持ちを、 助けていただきましてどうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問