teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問animatedModalのCLOSEボタンはz-index位置関係の呪縛を乗り越えられるか？

編集履歴

質問編集履歴

4

ソースコードの修正。

2016/08/06 15:17

投稿

hatoQ
hatoQ

スコア45

test CHANGED
File without changes
test CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
  <li><a>hoge</a></li>
52
52
 
53
- <li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
53
+ <li><a id="menuTrigger" class="menu-trigger" href="#openMenu">MENU</a></li>★A
54
54
 
55
55
  </ul>
56
56
 

3

文法の修正

2016/08/06 15:17

投稿

hatoQ
hatoQ

スコア45

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  20160806 23:47 CSS追記しました。よろしくお願いします！
18
18
 
19
+ 20160807 00:00 たびたび申し訳ありません。ソースコード修正しました。
20
+
19
21
 
20
22
 
21
23
  ###発生している問題・エラーメッセージ
@@ -28,57 +30,59 @@
28
30
 
29
31
  ###該当のソースコード
30
32
 
31
- ```ここに言語を入力
33
+ ```HTML
32
34
 
33
35
  /*HTML*/
34
36
 
35
37
  <header>
36
38
 
37
- ---<div id="header_sp">
39
+ <div id="header_sp">
38
40
 
39
- ------<nav>
41
+ <nav>
40
42
 
41
- ---------<ul id="navMenu">
43
+ <ul id="navMenu">
42
44
 
43
- ------------<li><a>hoge</a></li>
45
+ <li><a>hoge</a></li>
44
46
 
45
- ------------<li><a>hoge</a></li>
47
+ <li><a>hoge</a></li>
46
48
 
47
- ------------<li><a>hoge</a></li>
49
+ <li><a>hoge</a></li>
48
50
 
49
- ------------<li><a>hoge</a></li>
51
+ <li><a>hoge</a></li>
50
52
 
51
- ------------<li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
53
+ <li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
52
54
 
53
- ---------</ul>
55
+ </ul>
54
56
 
55
- ------</nav>
57
+ </nav>
56
58
 
57
- ---</div>
59
+ </div>
58
60
 
59
61
 
60
62
 
61
- ---<div id="openMenu">
63
+ <div id="openMenu">
62
64
 
63
- ------<span class="close-openMenu close01"></span>★B
65
+ <span class="close-openMenu close01"></span>★B
64
66
 
65
- ------<ul>
67
+ <ul>
66
68
 
67
- ---------<li><a>hoga</a></li>
69
+ <li><a>hoga</a></li>
68
70
 
69
- ---------<li><a>hoga</a></li>
71
+ <li><a>hoga</a></li>
70
72
 
71
- ---------<li><a>hoga</a></li>
73
+ <li><a>hoga</a></li>
72
74
 
73
- ---------<li><a class="close-openMenu close02">× CLOSE</a></li>★C
75
+ <li><a class="close-openMenu close02">× CLOSE</a></li>★C
74
76
 
75
- ------</ul>
77
+ </ul>
76
78
 
77
- ---</div>
79
+ </div>
78
80
 
79
81
  </header>
80
82
 
83
+ ```
81
84
 
85
+ ```JavaScript
82
86
 
83
87
  /*jQuery*/
84
88
 
@@ -86,13 +90,13 @@
86
90
 
87
91
  $(function(){
88
92
 
89
- ---$('.menu-trigger').on('click', function() {
93
+ $('.menu-trigger').on('click', function() {
90
94
 
91
- ------$(this).toggleClass('active').toggleClass('close-openMenu');
95
+ $(this).toggleClass('active').toggleClass('close-openMenu');
92
96
 
93
- ---------return false;
97
+ return false;
94
98
 
95
- ------});
99
+ });
96
100
 
97
101
  });
98
102
 
@@ -100,23 +104,25 @@
100
104
 
101
105
  $(function() {
102
106
 
103
- ---$('#menuTrigger').animatedModal ({
107
+ $('#menuTrigger').animatedModal ({
104
108
 
105
- ------modalTarget: 'openMenu',
109
+ modalTarget: 'openMenu',
106
110
 
107
- ------animatedIn: 'fadeInDown',
111
+ animatedIn: 'fadeInDown',
108
112
 
109
- ------animatedOut: 'fadeOutUp',
113
+ animatedOut: 'fadeOutUp',
110
114
 
111
- ------animationDuration: '1s',
115
+ animationDuration: '1s',
112
116
 
113
- ------color: '#ffffff',
117
+ color: '#ffffff',
114
118
 
115
- ---});
119
+ });
116
120
 
117
121
  });
118
122
 
123
+ ```
119
124
 
125
+ ```CSS
120
126
 
121
127
  /*CSS*/
122
128
 
@@ -136,7 +142,7 @@
136
142
 
137
143
  #openMenu {}
138
144
 
139
- #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 9999;}
145
+ #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 99999;}
140
146
 
141
147
  #openMenu ul { width: 100%;}
142
148
 

2

誤字修正

2016/08/06 15:00

投稿

hatoQ
hatoQ

スコア45

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  #openMenu {}
138
138
 
139
- #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 10;}
139
+ #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 9999;}
140
140
 
141
141
  #openMenu ul { width: 100%;}
142
142
 

1

CSS追記しました。

2016/08/06 14:48

投稿

hatoQ
hatoQ

スコア45

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,8 @@
14
14
 
15
15
 
16
16
 
17
+ 20160806 23:47 CSS追記しました。よろしくお願いします！
18
+
17
19
 
18
20
 
19
21
  ###発生している問題・エラーメッセージ
@@ -26,6 +28,8 @@
26
28
 
27
29
  ###該当のソースコード
28
30
 
31
+ ```ここに言語を入力
32
+
29
33
  /*HTML*/
30
34
 
31
35
  <header>
@@ -34,7 +38,9 @@
34
38
 
35
39
  ------<nav>
36
40
 
37
- ---------<ul>
41
+ ---------<ul id="navMenu">
42
+
43
+ ------------<li><a>hoge</a></li>
38
44
 
39
45
  ------------<li><a>hoge</a></li>
40
46
 
@@ -54,7 +60,7 @@
54
60
 
55
61
  ---<div id="openMenu">
56
62
 
57
- ------<span class="close-openMenu"></span>★B
63
+ ------<span class="close-openMenu close01"></span>★B
58
64
 
59
65
  ------<ul>
60
66
 
@@ -64,7 +70,7 @@
64
70
 
65
71
  ---------<li><a>hoga</a></li>
66
72
 
67
- ---------<li><a class="close-openMenu">× CLOSE</a></li>★C
73
+ ---------<li><a class="close-openMenu close02">× CLOSE</a></li>★C
68
74
 
69
75
  ------</ul>
70
76
 
@@ -112,6 +118,36 @@
112
118
 
113
119
 
114
120
 
121
+ /*CSS*/
122
+
123
+ header { z-index: 100;}
124
+
125
+ #header_sp { width: 100%; text-align: center; border-top: 10px solid #e4b138;}
126
+
127
+ nav { position: relative; top: 0; width: 100%; background: #fff; z-index: 99999;}
128
+
129
+ #navMenu { width: 100%; overflow: hidden; background: #fff;}
130
+
131
+ #navMenu li { width: calc(100% / 5); float: left; border-right: 1px solid #997726; border-bottom: 1px solid #997726;}
132
+
133
+ #navMenu li a { display: block;}
134
+
135
+ /*.menu-triggerは省きます。三本線のハンバーガーがクリックでバッテンにanimateするボタンです。*/
136
+
137
+ #openMenu {}
138
+
139
+ #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 10;}
140
+
141
+ #openMenu ul { width: 100%;}
142
+
143
+ #openMenu ul li { width: 100%; height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #333;}
144
+
145
+ #openMenu ul li a { disblay: block;}
146
+
147
+ ```
148
+
149
+
150
+
115
151
 
116
152
 
117
153
  ###試したこと