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

編集履歴

質問編集履歴

4

ソースコードの修正。

2016/08/06 15:17

投稿

hatoQ
hatoQ

スコア45

title CHANGED
File without changes
body CHANGED
@@ -24,7 +24,7 @@
24
24
  <li><a>hoge</a></li>
25
25
  <li><a>hoge</a></li>
26
26
  <li><a>hoge</a></li>
27
- <li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
27
+ <li><a id="menuTrigger" class="menu-trigger" href="#openMenu">MENU</a></li>★A
28
28
  </ul>
29
29
  </nav>
30
30
  </div>

3

文法の修正

2016/08/06 15:17

投稿

hatoQ
hatoQ

スコア45

title CHANGED
File without changes
body CHANGED
@@ -7,57 +7,60 @@
7
7
  よろしくお願いします。
8
8
 
9
9
  20160806 23:47 CSS追記しました。よろしくお願いします！
10
+ 20160807 00:00 たびたび申し訳ありません。ソースコード修正しました。
10
11
 
11
12
  ###発生している問題・エラーメッセージ
12
13
  z-index:99999の要素（ナビ）の下からz-index:9999のドロワーメニューがにゅるっと出てくる。
13
14
  このとき、ナビの右上のハンバーガーメニューアイコン（ドロワーメニューを開けるトリガー）を
14
15
  閉じるボタンとも兼任させたいのだが、、、
15
16
  ###該当のソースコード
16
- ```ここに言語を入力
17
+ ```HTML
17
18
  /*HTML*/
18
19
  <header>
19
- ---<div id="header_sp">
20
+ <div id="header_sp">
20
- ------<nav>
21
+ <nav>
21
- ---------<ul id="navMenu">
22
+ <ul id="navMenu">
22
- ------------<li><a>hoge</a></li>
23
+ <li><a>hoge</a></li>
23
- ------------<li><a>hoge</a></li>
24
+ <li><a>hoge</a></li>
24
- ------------<li><a>hoge</a></li>
25
+ <li><a>hoge</a></li>
25
- ------------<li><a>hoge</a></li>
26
+ <li><a>hoge</a></li>
26
- ------------<li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
27
+ <li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
27
- ---------</ul>
28
+ </ul>
28
- ------</nav>
29
+ </nav>
29
- ---</div>
30
+ </div>
30
31
 
31
- ---<div id="openMenu">
32
+ <div id="openMenu">
32
- ------<span class="close-openMenu close01"></span>★B
33
+ <span class="close-openMenu close01"></span>★B
33
- ------<ul>
34
+ <ul>
34
- ---------<li><a>hoga</a></li>
35
+ <li><a>hoga</a></li>
35
- ---------<li><a>hoga</a></li>
36
+ <li><a>hoga</a></li>
36
- ---------<li><a>hoga</a></li>
37
+ <li><a>hoga</a></li>
37
- ---------<li><a class="close-openMenu close02">× CLOSE</a></li>★C
38
+ <li><a class="close-openMenu close02">× CLOSE</a></li>★C
38
- ------</ul>
39
+ </ul>
39
- ---</div>
40
+ </div>
40
41
  </header>
41
-
42
+ ```
43
+ ```JavaScript
42
44
  /*jQuery*/
43
45
  //メニューボタン
44
46
  $(function(){
45
- ---$('.menu-trigger').on('click', function() {
47
+ $('.menu-trigger').on('click', function() {
46
- ------$(this).toggleClass('active').toggleClass('close-openMenu');
48
+ $(this).toggleClass('active').toggleClass('close-openMenu');
47
- ---------return false;
49
+ return false;
48
- ------});
50
+ });
49
51
  });
50
52
  //モーダルウィンドウ設定 -- animatedModal.js
51
53
  $(function() {
52
- ---$('#menuTrigger').animatedModal ({
54
+ $('#menuTrigger').animatedModal ({
53
- ------modalTarget: 'openMenu',
55
+ modalTarget: 'openMenu',
54
- ------animatedIn: 'fadeInDown',
56
+ animatedIn: 'fadeInDown',
55
- ------animatedOut: 'fadeOutUp',
57
+ animatedOut: 'fadeOutUp',
56
- ------animationDuration: '1s',
58
+ animationDuration: '1s',
57
- ------color: '#ffffff',
59
+ color: '#ffffff',
58
- ---});
60
+ });
59
61
  });
60
-
62
+ ```
63
+ ```CSS
61
64
  /*CSS*/
62
65
  header { z-index: 100;}
63
66
  #header_sp { width: 100%; text-align: center; border-top: 10px solid #e4b138;}
@@ -67,7 +70,7 @@
67
70
  #navMenu li a { display: block;}
68
71
  /*.menu-triggerは省きます。三本線のハンバーガーがクリックでバッテンにanimateするボタンです。*/
69
72
  #openMenu {}
70
- #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 9999;}
73
+ #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 99999;}
71
74
  #openMenu ul { width: 100%;}
72
75
  #openMenu ul li { width: 100%; height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #333;}
73
76
  #openMenu ul li a { disblay: block;}

2

誤字修正

2016/08/06 15:00

投稿

hatoQ
hatoQ

スコア45

title CHANGED
File without changes
body CHANGED
@@ -67,7 +67,7 @@
67
67
  #navMenu li a { display: block;}
68
68
  /*.menu-triggerは省きます。三本線のハンバーガーがクリックでバッテンにanimateするボタンです。*/
69
69
  #openMenu {}
70
- #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 10;}
70
+ #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 9999;}
71
71
  #openMenu ul { width: 100%;}
72
72
  #openMenu ul li { width: 100%; height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #333;}
73
73
  #openMenu ul li a { disblay: block;}

1

CSS追記しました。

2016/08/06 14:48

投稿

hatoQ
hatoQ

スコア45

title CHANGED
File without changes
body CHANGED
@@ -6,32 +6,35 @@
6
6
  どなたか解決できるのかも含めて、解決策をお教えいただければと思います。
7
7
  よろしくお願いします。
8
8
 
9
+ 20160806 23:47 CSS追記しました。よろしくお願いします！
9
10
 
10
11
  ###発生している問題・エラーメッセージ
11
12
  z-index:99999の要素（ナビ）の下からz-index:9999のドロワーメニューがにゅるっと出てくる。
12
13
  このとき、ナビの右上のハンバーガーメニューアイコン（ドロワーメニューを開けるトリガー）を
13
14
  閉じるボタンとも兼任させたいのだが、、、
14
15
  ###該当のソースコード
16
+ ```ここに言語を入力
15
17
  /*HTML*/
16
18
  <header>
17
19
  ---<div id="header_sp">
18
20
  ------<nav>
19
- ---------<ul>
21
+ ---------<ul id="navMenu">
20
22
  ------------<li><a>hoge</a></li>
21
23
  ------------<li><a>hoge</a></li>
22
24
  ------------<li><a>hoge</a></li>
25
+ ------------<li><a>hoge</a></li>
23
26
  ------------<li><a class="menu-trigger" href="#openMenu">MENU</a></li>★A
24
27
  ---------</ul>
25
28
  ------</nav>
26
29
  ---</div>
27
30
 
28
31
  ---<div id="openMenu">
29
- ------<span class="close-openMenu"></span>★B
32
+ ------<span class="close-openMenu close01"></span>★B
30
33
  ------<ul>
31
34
  ---------<li><a>hoga</a></li>
32
35
  ---------<li><a>hoga</a></li>
33
36
  ---------<li><a>hoga</a></li>
34
- ---------<li><a class="close-openMenu">× CLOSE</a></li>★C
37
+ ---------<li><a class="close-openMenu close02">× CLOSE</a></li>★C
35
38
  ------</ul>
36
39
  ---</div>
37
40
  </header>
@@ -55,7 +58,22 @@
55
58
  ---});
56
59
  });
57
60
 
61
+ /*CSS*/
62
+ header { z-index: 100;}
63
+ #header_sp { width: 100%; text-align: center; border-top: 10px solid #e4b138;}
64
+ nav { position: relative; top: 0; width: 100%; background: #fff; z-index: 99999;}
65
+ #navMenu { width: 100%; overflow: hidden; background: #fff;}
66
+ #navMenu li { width: calc(100% / 5); float: left; border-right: 1px solid #997726; border-bottom: 1px solid #997726;}
67
+ #navMenu li a { display: block;}
68
+ /*.menu-triggerは省きます。三本線のハンバーガーがクリックでバッテンにanimateするボタンです。*/
69
+ #openMenu {}
70
+ #openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 10;}
71
+ #openMenu ul { width: 100%;}
72
+ #openMenu ul li { width: 100%; height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #333;}
73
+ #openMenu ul li a { disblay: block;}
74
+ ```
58
75
 
76
+
59
77
  ###試したこと
60
78
  ★Aにクリックでclose-openMenuクラスを付けてみた。
61
79
  →そもそもドロワーメニューの外の要素だから干渉できないと思われる。