実現したいこと
幅広画面では横並びのドロップダウンメニューが、同じ幅で 1 つずつ縦に並ぶ。(折り返さない)
前提
以下の処理を追加しようとしています。(他解決策でも)
各要素の幅を取得する 最長文字列の要素幅を特定する
画面幅内に全要素を横並びできない場合は、最長文字列の要素幅を全兄弟要素に設定する
発生している問題
JavaScript で生成している Html 要素の幅を取得できない。
該当のソースコード
Html
1 <div id="suiteBarDelta">
2 </div>
JavaScript
1 let 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
18 var 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
24 var 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
30 var 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
39 createNavigation ( myMockListData ) ;
40
41 function 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
50 function 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()">☰</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 aLink . href = navData [ x ] . URL ;
58 aLink . appendChild ( document . createTextNode ( navData [ x ] . URLNAME ) ) ;
59 topNav . appendChild ( aLink ) ;
60 } else if ( navData [ x ] . dropDown === "yes" ) {
61 var buildSubNavigation ;
62 buildSubNavigation = buildSubNavBar ( navData [ x ] . id ) ;
63 topNav . appendChild ( buildSubNavigation ) ;
64 } else {
65 //build megamenu
66 var buildSubNavigation ;
67 buildDirectorateNav = buildDirectorateMegaMenu ( navData [ x ] . id ) ;
68 }
69 }
70 }
71
72 function buildDirectorateMegaMenu ( navDataID ) {
73 var buildNav ;
74 var topNav = document . getElementById ( "myTopnav" ) ;
75 buildNav = buildSubNavBar ( navDataID , "megaMenu" ) ; //Build mega menu and attach in buildSubNavBar()
76 topNav . appendChild ( buildNav ) ;
77 }
78
79 function buildSubNavBar ( subNavID , isDirectorate ) {
80 //create div and add dropdown class
81 var ddDiv = _createEl ( "div" ) ;
82 if ( isDirectorate === "megaMenu" ) {
83 ddDiv . classList . add ( "Mdropdown" ) ;
84 } else {
85 ddDiv . classList . add ( "dropdown" ) ;
86 }
87 //create button and add text
88 var btn = _createEl ( "button" ) ;
89 if ( isDirectorate === "megaMenu" ) {
90 btn . classList . add ( "Mdropbtn" ) ;
91 } else {
92 btn . classList . add ( "dropbtn" ) ;
93 }
94 //append the text to the button
95 btn . appendChild ( document . createTextNode ( subNavID ) ) ;
96
97 //create i tag and add "fa fa-caret-down" classes
98 var itag = _createEl ( "i" ) ;
99 itag . classList . add ( "fa" ) ;
100 itag . classList . add ( "fa-caret-down" ) ;
101 itag . classList . add ( "fa-fw" ) ;
102 btn . appendChild ( itag ) ;
103 ddDiv . appendChild ( btn ) ;
104
105 var ddContent = _createEl ( "div" ) ;
106 ddContent . classList . add ( "dropdown-content" ) ;
107 for ( var i = 0 ; i < subList . length ; i ++ ) {
108 if ( subList [ i ] . id === subNavID && subList [ i ] . id !== "Training" ) {
109 var a = _createEl ( "a" ) ;
110 a . href = subList [ i ] . subURL ;
111 a . appendChild ( document . createTextNode ( subList [ i ] . URLNAME ) ) ;
112 ddContent . appendChild ( a ) ;
113 }
114 }
115
116 if ( isDirectorate !== "megaMenu" ) {
117 ddContent = createContent ( subNavID , ddContent , false , ddDiv ) ;
118
119 } else {
120
121 //create div and add dropdown class
122 var megaDivDropDown = _createEl ( "div" ) ;
123 megaDivDropDown . classList . add ( "dropdown" ) ;
124
125 var megaBtn = _createEl ( "button" ) ;
126 megaBtn . classList . add ( "dropbtn" ) ;
127
128 megaDivDropDown . appendChild ( megaBtn ) ;
129 var megaI = _createEl ( "i" ) ;
130 megaI . classList . add ( "fa" ) ;
131 megaI . classList . add ( "fa-caret-down" ) ;
132
133 megaBtn . appendChild ( megaI ) ;
134
135 var megaDDivContent = _createEl ( "div" ) ;
136 megaDDivContent . classList . add ( "Mdropdown-content" ) ;
137
138 ddDiv = createContent ( subNavID , megaDDivContent , true , ddDiv ) ;
139 }
140 ddDiv . appendChild ( ddContent ) ;
141 return ddDiv ;
142 }
143 function _createEl ( el ) {
144 return document . createElement ( el ) ;
145 }
146
147 function createContent ( subNavID , content , bMegaMenu , ddDiv ) {
148
149 var iWidthMax = 0 ;
150 var iWidthAll = 0 ;
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 // 幅取得箇所案 1 : h2 追加直後
163 iWidthAll = iWidthAll + headerDiv . style . width ;
164 if ( iWidthMax < headerDiv . clientWidth ) {
165 iWidthMax = headerDiv . clientWidth ;
166 }
167
168 var divCol = _createEl ( "div" ) ;
169 divCol . classList . add ( "column" ) ;
170 var colHr = _createEl ( "h3" ) ;
171 colHr . appendChild ( document . createTextNode ( "" ) ) ;
172 divCol . appendChild ( colHr ) ;
173 for ( var x = 0 ; x < categoryMenu . length ; x ++ ) {
174 if ( megaMenuCategory [ i ] . category === categoryMenu [ x ] . category ) {
175 var colAnchor = _createEl ( "a" ) ;
176 colAnchor . href = categoryMenu [ x ] . menuUrl ;
177 colAnchor . appendChild ( document . createTextNode ( categoryMenu [ x ] . menuItem ) ) ;
178
179 divCol . appendChild ( colAnchor ) ;
180 headerDiv . appendChild ( divCol ) ;
181 content . appendChild ( headerDiv ) ;
182 if ( bMegaMenu ) {
183 ddDiv . appendChild ( content ) ;
184 }
185 }
186 }
187
188 // 幅取得箇所案 2 : 全行追加後に最後の h2 要素を取得する
189 var nodes = document . querySelectorAll ( '.header>h2' ) ;
190 var last = nodes [ nodes . length - 1 ] ;
191 }
192 }
193 /*
194 // 画面幅が全要素の和より小さい場合、最大要素幅にする
195 if (window.innerWidth < iWidthAll) {
196 var childElems = content.children;
197 for (var i = 0; i < childElems.length; i++) {
198 childElems[i].style.width = iWidthMax;
199 }
200 }
201 */
202
203 if ( ! bMegaMenu ) {
204 return content ;
205 } else {
206 return ddDiv ;
207 }
208 }
209
CSS
1 body { margin : 0 ; }
2
3 .topnav {
4 display : flex ;
5 overflow : hidden ;
6 background-color : #5A7FA2 ;
7 }
8
9 .topnav a {
10 display : block ;
11 color : #f2f2f2 ;
12 text-align : center ;
13 padding : 14 px 16 px ;
14 text-decoration : none ;
15 font-size : 17 px ;
16 }
17
18 .active {
19 background-color : #4CAF50 ;
20 color : white ;
21 }
22
23 .topnav .icon {
24 display : none ;
25 }
26
27 .dropdown {
28 overflow : hidden ;
29 }
30
31 .dropdown .dropbtn {
32 font-size : 17 px ;
33 border : none ;
34 outline : none ;
35 color : white ;
36 padding : 14 px 16 px ;
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 : 160 px ;
47 left : auto ;
48 box-shadow : 0 px 8 px 16 px 0 px rgba ( 0 , 0 , 0 , 0.2 ) ;
49 z-index : 1 ;
50 }
51
52 .dropdown-content a {
53 float : none ;
54 color : black ;
55 padding : 12 px 16 px ;
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 : flex ;
72 flex-wrap : wrap ;
73 }
74
75 .dropdown :last-child .dropdown-content {
76 flex-direction : column ;
77 }
78
79 /*MEGA-MENU*/
80 * {
81 box-sizing : border-box ;
82 }
83
84 .Mnavbar {
85 overflow : hidden ;
86 background-color : #333 ;
87 font-family : Arial , Helvetica , sans-serif ;
88 }
89
90 .Mnavbar a {
91 font-size : 16 px ;
92 color : white ;
93 text-align : center ;
94 padding : 14 px 16 px ;
95 text-decoration : none ;
96 }
97
98 .Mdropdown {
99 overflow : hidden ;
100 }
101
102 .Mdropdown .Mdropbtn {
103 font-size : 16 px ;
104 border : none ;
105 outline : none ;
106 color : white ;
107 padding : 14 px 16 px ;
108 background-color : inherit ;
109 font : inherit ;
110 margin : 0 ;
111 }
112
113 .Mnavbar a :hover , .Mdropdown :hover .Mdropbtn {
114 background-color : #555 ;
115 }
116
117 .Mdropdown-content {
118 display : none ;
119 position : absolute ;
120 background-color : #f9f9f9 ;
121 left : 0 ;
122 box-shadow : 0 px 8 px 16 px 0 px rgba ( 0 , 0 , 0 , 0.2 ) ;
123 z-index : 1 ;
124 }
125
126 .header {
127 float : left ;
128 background : #555 ;
129 padding : 16 px ;
130 color : white ;
131 overflow : hidden ;
132 flex-grow : 1 ;
133 }
134
135 .header h2 {
136 padding : 16 px ;
137 color : white ;
138 }
139
140 .Mdropdown :hover .Mdropdown-content {
141 display : flex ;
142 flex-wrap : wrap ;
143 }
144
145 .column {
146 margin : 0 -16 px -16 px ;
147 padding : 10 px ;
148 background-color : #ccc ;
149 height : 250 px ;
150 }
151
152 .column a {
153 float : none ;
154 color : black ;
155 padding : 16 px ;
156 text-decoration : none ;
157 display : block ;
158 text-align : left ;
159 }
160
161 .column a :hover {
162 background-color : #ddd ;
163 }
164
165 .header :hover h2 {
166 color : orange ;
167 }
試したこと
Q&A
自己解決
