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

Question

前提・実現したいこと

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

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

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

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

• 右側
• 上側

エラーメッセージ

該当のソースコード

位置 : メニュー挿入前
<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
	<div id="DeltaHorizontalQuickLaunch" role="navigation">
		<div class="ms-quicklaunchouter">
			<div class="ms-quickLaunch">
			</div>
		</div>
	</div>
</div>
位置 : メニュー挿入後

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #5A7FA2;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*MEGA-MENU*/
* {
  box-sizing: border-box;
}

.Mnavbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.Mnavbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.Mdropdown {
  float: left;
  overflow: hidden;
}

.Mdropdown .Mdropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.Mnavbar a:hover, .Mdropdown:hover .Mdropbtn {
  background-color: #555;
}

.Mdropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.Mdropdown-content .Mheader {
  float: left;
  background: #555;
  padding: 16px;  
  color: white;
}

.Mdropdown:hover .Mdropdown-content { 
  display: block;
}

/* Create three equal columns that floats next to each other */
.Mcolumn {
  margin: 0 -16px -16px;  
  float: left;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.Mcolumn a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.Mcolumn a:hover {
  background-color: #ddd;
}

.Mheader:hover {
  color: orange;
}

/* Clear floats after the columns */
.Mrow:after {
  content: "";
  display: table;
  clear: both;
}

let myMockListData = [
	{
		URL: "/siteA.aspx",
		URLNAME: "Home",
		dropDown: "no",
		id: "home"
	},
	{
		URL: "/siteA.aspx",
		URLNAME: "Site A",
		dropDown: "yes",
		id: "SiteA"
	},
	{
		URL: "/siteE.aspx",
		URLNAME: "Training",
		dropDown: "training",
		id: "Training"
	}
];

var subList = [
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
	{ subURL: "/site/a", id: "SiteA", URLNAME: "Site A" },
];

var megaMenuCategory = [
	{ category: "DT", url: "www.gmail.com" },
	{ category: "親要素の文字数が多いとレイアウトが崩れる", url: "www.gmail.com" },
	{ category: "IT", url: "www.gmail.com" }
];

var categoryMenu = [
	{ category: "DT", menuItem: "DT-BT", menuUrl: "wwww.gmail.com" },
	{ category: "DT", menuItem: "DT-SE", menuUrl: "wwww.gmail.com" },
	{ category: "DT", menuItem: "DT-PI", menuUrl: "wwww.gmail.com" },
	{ category: "親要素の文字数が多いとレイアウトが崩れる", menuItem: "Human Resources", menuUrl: "wwww.gmail.com" },
	{ category: "IT", menuItem: "IT-IO", menuUrl: "wwww.gmail.com" },
	{ category: "IT", menuItem: "IT-CS", menuUrl: "wwww.gmail.com" }
];

createNavigation(myMockListData);

function myFunction() {
	var x = document.getElementById("myTopnav");
	if (x.className === "topnav") {
		x.className += " responsive";
	} else {
		x.className = "topnav";
	}
}

function createNavigation(navData) {
    var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");
	headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></div>');
	var topNav = document.getElementById("myTopnav");
	for (var x = 0; x < navData.length; x++) {
		if (navData[x].dropDown === "no") {
			var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
			aLink.href = navData[x].URL;
			aLink.appendChild(aTextNode);
			topNav.appendChild(aLink);
		} else if (navData[x].dropDown === "yes") {
			var buildSubNavigation;
			buildSubNavigation = buildSubNavBar(navData[x].id);
			topNav.appendChild(buildSubNavigation);
		} else {
			//build megamenu
			var buildSubNavigation;
			buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
		}
	}
}

function buildDirectorateMegaMenu(navDataID) {
	var buildNav;
	var headerElement = document.getElementById("DeltaHorizontalQuickLaunch");
	var topNav = document.getElementById("myTopnav");
	buildNav = buildSubNavBar(navDataID, "training");  //Build mega menu and attach in buildSubNavBar()
	headerElement.appendChild(buildNav);
	topNav.appendChild(buildNav);
}

function buildSubNavBar(subNavID, isDirectorate) {
    //create div and add dropdown class
    var ddDiv = _createEl("div");
    if(isDirectorate === "training"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    //create button and add text
    var btn = _createEl("button");
    if(isDirectorate === "training"){
        btn.classList.add("Mdropbtn");
    }else{
        btn.classList.add("dropbtn");
    }
    var btnText = document.createTextNode(subNavID);
    //append the text to the button
    btn.appendChild(btnText);

    //create i tag and add "fa fa-caret-down" classes
    var itag = _createEl("i");
    itag.classList.add("fa");
    itag.classList.add("fa-caret-down");
    itag.classList.add("fa-fw");
    btn.appendChild(itag);
    ddDiv.appendChild(btn);

    var ddContent = _createEl("div");
    ddContent.classList.add("dropdown-content");
    for (var i = 0; i < subList.length; i++) {
        if (subList[i].id === subNavID  && subList[i].id !== "Training") {
            var li = _createEl("li");
            var a = _createEl("a");
            var aTextNode = document.createTextNode(subList[i].URLNAME);

            a.href = subList[i].subURL;
            a.appendChild(aTextNode);
            ddContent.appendChild(a);  
        }
    }
  
    if(isDirectorate === "training"){
        //alert("I ");
        //create div and add dropdown class
        var megaDivDropDown = _createEl("div");
        megaDivDropDown.classList.add("dropdown");

        var megaBtn = _createEl("button");
        megaBtn.classList.add("dropbtn");

        megaDivDropDown.appendChild(megaBtn);
        var megaI = _createEl("i");
        megaI.classList.add("fa");
        megaI.classList.add("fa-caret-down");
        megaBtn.appendChild(megaI);

        var megaDDivContent = _createEl("div");
        megaDDivContent.classList.add("Mdropdown-content");

        //Loop through categories & sub-categories items
        for (var i = 0; i < megaMenuCategory.length; i++) {

        var headerDiv = _createEl("div");
        headerDiv.classList.add("Mheader");

        var megaH2 = _createEl("h2");
        megaH2.appendChild(document.createTextNode(megaMenuCategory[i].category));
        headerDiv.appendChild(megaH2);

        var megaDDivRow = _createEl("div");
        megaDDivRow.classList.add("Mrow");

            var megaDivCol = _createEl("div");
            megaDivCol.classList.add("Mcolumn");
            var colHr = _createEl("h3");
            colHr.appendChild(document.createTextNode(""));
            megaDivCol.appendChild(colHr);
            for (var x = 0; x < categoryMenu.length; x++) {
                if (megaMenuCategory[i].category === categoryMenu[x].category) {
                    var colAnchor = _createEl("a");
                    colAnchor.href = categoryMenu[x].menuUrl;
                    colAnchor.appendChild(document.createTextNode(categoryMenu[x].menuItem));

                    megaDivCol.appendChild(colAnchor);
                    megaDDivRow.appendChild(megaDivCol);
                    headerDiv.appendChild(megaDDivRow);
                    megaDDivContent.appendChild(headerDiv);
                    ddDiv.appendChild(megaDDivContent);
                }
            }
            console.log("megaDdivRow:");
            console.log(ddDiv);
        }
    }
    ddDiv.appendChild(ddContent);
    return ddDiv;
}    
function _createEl(el) {
	return document.createElement(el);
}

試したこと

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

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

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

Comments

[int32_t]

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

[yambejp]

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

[BetterEveryday]

int32_t さま、ご確認ありがとうございます。
表示された背景色 (親) は .Mheader の div 要素と考えています。

親要素、子要素を特定する記述を「発生している問題」へ追加しました。
どうぞよろしくお願いいたします。

[BetterEveryday]

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

数年来実現したいと思っていた問題に対する、英語圏から見つけた貴重な解決策で、
私としてはなんとか希望するレイアウトへ変更できれば、と一縷の望みをかけております。

なにとぞどうぞよろしくお願いいたします。

Answer 1

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

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

Comments

[BetterEveryday]

int32_t さま、ご検討ありがとうございます。
.Mcolumn から float:left; を除去しても変化はありませんでした。

.Mdropdown-content : none を変更してしまうと、
メガ指定していない (myMockListData で dropDown = no や yes の) メニューまでメガメニューになってしまいます。

実現したいことに 3 種類のメニューがあることを追加しました。
なにとぞどうぞよろしくお願いいたします。

[BetterEveryday]

int32_t さま、申し訳ございません。
教示いただいた、.Mcolumn から float:left; 除去を再度試したところ、
左側のレイアウト崩れを解消できました。

上部/下部にレイアウト崩れが残る状態につきまして、
「試したこと」に画像を追加しましたが、
実運用環境 SharePoint では現象発生せず、
これ以上の対応は不要のようですので、
この質問は解決済みにしようと思います。

周りに相談できる開発者がいない環境の中で、自分ではどうしようもなく、
半ば諦めていた中での、ダメ元での投稿でしたので、たいへん助かりました。

私の問題解決のために貴重なお時間とお気持ちを、
助けていただきましてどうもありがとうございました。