質問編集履歴
4
変更 : 発生している問題 (並び縦横混在の追加)
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -11,8 +11,10 @@
|
|
|
11
11
|
|4|3|左端|横|縦|↑同上|.Mdropdown-content|↑同上||
|
|
12
12
|
|
|
13
13
|
### 発生している問題
|
|
14
|
+
【画面幅が小さい場合に】
|
|
15
|
+
- [ ] 横並びと縦並びが混在してしまう
|
|
14
|
-
- [ ]
|
|
16
|
+
- [ ] バラバラな幅になってしまう
|
|
15
|
-
|
|
16
18
|
|
|
17
19
|
### 該当のソースコード
|
|
18
20
|
|
3
修正 : 前提 (No.2 子要素)
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|No|階層|位置|幅広画面並び|幅狭画面並び|例|親要素|子要素|image|
|
|
7
7
|
|:--|:--:|:--:|:--:|:--:|:--:|:--:|:--:|--:|
|
|
8
8
|
|1|1|-|-|-|Home|-|-||
|
|
9
|
-
|2|2|真下|縦|縦|Site A|.dropdown-content|リ
|
|
9
|
+
|2|2|真下|縦|縦|Site A|.dropdown-content|リンク||
|
|
10
10
|
|3|3|真下|横|縦|Training|↑同上|.header||
|
|
11
11
|
|4|3|左端|横|縦|↑同上|.Mdropdown-content|↑同上||
|
|
12
12
|
|
2
更新 : 前提 (No.4 幅狭画面並び)
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
- [ ] **前提** No.3 のメニューに対して、【画面幅が小さい場合に】同じ幅で縦に整列したい。
|
|
4
4
|
|
|
5
5
|
### 前提
|
|
6
|
-
|No|階層|位置|
|
|
6
|
+
|No|階層|位置|幅広画面並び|幅狭画面並び|例|親要素|子要素|image|
|
|
7
7
|
|:--|:--:|:--:|:--:|:--:|:--:|:--:|:--:|--:|
|
|
8
8
|
|1|1|-|-|-|Home|-|-||
|
|
9
9
|
|2|2|真下|縦|縦|Site A|.dropdown-content|リスト||
|
|
10
10
|
|3|3|真下|横|縦|Training|↑同上|.header||
|
|
11
|
-
|4|3|左端|横|
|
|
11
|
+
|4|3|左端|横|縦|↑同上|.Mdropdown-content|↑同上||
|
|
12
12
|
|
|
13
13
|
### 発生している問題
|
|
14
14
|
- [ ] 【画面幅が小さい場合に】 バラバラな幅で縦に並んでしまう
|
|
@@ -301,12 +301,9 @@
|
|
|
301
301
|
ddContent.classList.add("dropdown-content");
|
|
302
302
|
for (var i = 0; i < subList.length; i++) {
|
|
303
303
|
if (subList[i].id === subNavID && subList[i].id !== "Training") {
|
|
304
|
-
var li = _createEl("li");
|
|
305
304
|
var a = _createEl("a");
|
|
306
|
-
var aTextNode = document.createTextNode(subList[i].URLNAME);
|
|
307
|
-
|
|
308
305
|
a.href = subList[i].subURL;
|
|
309
|
-
a.appendChild(aTextNode);
|
|
306
|
+
a.appendChild(document.createTextNode(subList[i].URLNAME));
|
|
310
307
|
ddContent.appendChild(a);
|
|
311
308
|
}
|
|
312
309
|
}
|
1
追加 : 前提 (4 種類のメニュー)
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
|
-
- [ ] 【
|
|
3
|
+
- [ ] **前提** No.3 のメニューに対して、【画面幅が小さい場合に】同じ幅で縦に整列したい。
|
|
4
4
|
|
|
5
5
|
### 前提
|
|
6
|
-
|
|
6
|
+
|No|階層|位置|並び幅広画面|並び幅狭画面|例|親要素|子要素|image|
|
|
7
|
+
|:--|:--:|:--:|:--:|:--:|:--:|:--:|:--:|--:|
|
|
7
|
-
|
|
|
9
|
+
|2|2|真下|縦|縦|Site A|.dropdown-content|リスト||
|
|
10
|
+
|3|3|真下|横|縦|Training|↑同上|.header||
|
|
11
|
+
|4|3|左端|横|横|↑同上|.Mdropdown-content|↑同上||
|
|
8
12
|
|
|
9
13
|
### 発生している問題
|
|
10
|
-
- [ ] 【
|
|
14
|
+
- [ ] 【画面幅が小さい場合に】 バラバラな幅で縦に並んでしまう
|
|
11
15
|
|
|
12
16
|
|
|
13
17
|
### 該当のソースコード
|
|
14
18
|
|
|
15
19
|
```html
|
|
16
|
-
位置 : メニュー挿入前
|
|
17
|
-
<div id="suiteBarDelta">
|
|
20
|
+
<div id="suiteBarDelta"></div>
|
|
18
|
-
</div>
|
|
19
|
-
位置 : メニュー挿入後
|
|
20
21
|
```
|
|
21
22
|
```CSS
|
|
22
23
|
body {margin:0;}
|
|
23
|
-
|
|
24
24
|
.topnav {
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
background-color: #5A7FA2;
|
|
27
|
-
margin-top : -2px;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
29
|
.topnav a {
|
|
@@ -66,7 +65,7 @@
|
|
|
66
65
|
display: none;
|
|
67
66
|
position: absolute;
|
|
68
67
|
background-color: #f9f9f9;
|
|
69
|
-
width:
|
|
68
|
+
min-width: 160px;
|
|
70
69
|
left: auto;
|
|
71
70
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
72
71
|
z-index: 1;
|
|
@@ -160,7 +159,6 @@
|
|
|
160
159
|
display: block;
|
|
161
160
|
}
|
|
162
161
|
|
|
163
|
-
/* Create three equal columns that floats next to each other */
|
|
164
162
|
.column {
|
|
165
163
|
margin: 0 -16px -16px;
|
|
166
164
|
padding: 10px;
|
|
@@ -224,12 +222,12 @@
|
|
|
224
222
|
];
|
|
225
223
|
|
|
226
224
|
var categoryMenu = [
|
|
227
|
-
{ category: "DT", menuItem: "DT-BT", menuUrl: "www
|
|
225
|
+
{ category: "DT", menuItem: "DT-BT", menuUrl: "www.gmail.com" },
|
|
228
|
-
{ category: "DT", menuItem: "DT-SE", menuUrl: "www
|
|
226
|
+
{ category: "DT", menuItem: "DT-SE", menuUrl: "www.gmail.com" },
|
|
229
|
-
{ category: "DT", menuItem: "DT-PI", menuUrl: "www
|
|
227
|
+
{ category: "DT", menuItem: "DT-PI", menuUrl: "www.gmail.com" },
|
|
230
|
-
{ category: "画面幅が小さいと縦並び、各アイテムの幅が揃わない", menuItem: "Human Resources", menuUrl: "www
|
|
228
|
+
{ category: "画面幅が小さいと縦並び、各アイテムの幅が揃わない", menuItem: "Human Resources", menuUrl: "www.gmail.com" },
|
|
231
|
-
{ category: "IT", menuItem: "IT-IO", menuUrl: "www
|
|
229
|
+
{ category: "IT", menuItem: "IT-IO", menuUrl: "www.gmail.com" },
|
|
232
|
-
{ category: "IT", menuItem: "IT-CS", menuUrl: "www
|
|
230
|
+
{ category: "IT", menuItem: "IT-CS", menuUrl: "www.gmail.com" }
|
|
233
231
|
];
|
|
234
232
|
|
|
235
233
|
createNavigation(myMockListData);
|
|
@@ -393,10 +391,3 @@
|
|
|
393
391
|
|
|
394
392
|
```
|
|
395
393
|
|
|
396
|
-
### 試したこと
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
401
|
-
|
|
402
|
-
|