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

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

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

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

CSS

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

Q&A

1回答

378閲覧

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

BetterEveryday

総合スコア19

JavaScript

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

CSS

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

0グッド

1クリップ

投稿2023/05/27 13:10

編集2023/05/28 15:04

実現したいこと

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

イメージ説明

前提

No階層位置幅広画面並び幅狭画面並び親要素子要素image
11---Home--
22真下Site A.dropdown-contentリンク
33真下Training↑同上.header
43左端↑同上.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

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

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

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

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

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

guest

回答1

0

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

総合スコア33551

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

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

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 にて 最長文字列の要素幅を取得し、全兄弟要素に同じ幅を設定する、 という対応がありえるのか、試してみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問