animatedModalのCLOSEボタンはz-index位置関係の呪縛を乗り越えられるか？

Question

###前提・実現したいこと
animatedModalというプラグインを使用して、
スマホサイトのドロワーメニューを作成しています。
CLOSEボタンを2ヵ所設置しているのですが、
（おそらく）z-indexの位置関係のせいで、機能しません。
どなたか解決できるのかも含めて、解決策をお教えいただければと思います。
よろしくお願いします。

20160806 23:47 CSS追記しました。よろしくお願いします！
20160807 00:00 たびたび申し訳ありません。ソースコード修正しました。

###発生している問題・エラーメッセージ
z-index:99999の要素（ナビ）の下からz-index:9999のドロワーメニューがにゅるっと出てくる。
このとき、ナビの右上のハンバーガーメニューアイコン（ドロワーメニューを開けるトリガー）を
閉じるボタンとも兼任させたいのだが、、、
###該当のソースコード

/*HTML*/
<header>
 <div id="header_sp">
  <nav>
   <ul id="navMenu">
    <li><a>hoge</a></li>
    <li><a>hoge</a></li>
    <li><a>hoge</a></li>
    <li><a>hoge</a></li>
    <li><a id="menuTrigger" class="menu-trigger" href="#openMenu">MENU</a></li>★A
   </ul>
  </nav>
 </div>

 <div id="openMenu">
  <span class="close-openMenu close01"></span>★B
  <ul>
   <li><a>hoga</a></li>
   <li><a>hoga</a></li>
   <li><a>hoga</a></li>
   <li><a class="close-openMenu close02">× CLOSE</a></li>★C
  </ul>
 </div>
</header>

/*jQuery*/
//メニューボタン
$(function(){
 $('.menu-trigger').on('click', function() {
  $(this).toggleClass('active').toggleClass('close-openMenu');
   return false;
 });
});
//モーダルウィンドウ設定 -- animatedModal.js
$(function() {
 $('#menuTrigger').animatedModal ({
  modalTarget: 'openMenu',
  animatedIn: 'fadeInDown',
  animatedOut: 'fadeOutUp',
  animationDuration: '1s',
  color: '#ffffff',
 });
});

/*CSS*/
header { z-index: 100;}
#header_sp { width: 100%; text-align: center; border-top: 10px solid #e4b138;}
nav { position: relative; top: 0; width: 100%; background: #fff; z-index: 99999;}
#navMenu { width: 100%; overflow: hidden; background: #fff;}
#navMenu li { width: calc(100% / 5); float: left; border-right: 1px solid #997726; border-bottom: 1px solid #997726;}
#navMenu li a { display: block;}
/*.menu-triggerは省きます。三本線のハンバーガーがクリックでバッテンにanimateするボタンです。*/
#openMenu {}
#openMenu .close01 { display: block; width: 30px; height: 30px; position: fixed; top: 30px; right: 20px; z-index: 99999;}
#openMenu ul { width: 100%;}
#openMenu ul li { width: 100%; height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #333;}
#openMenu ul li a { disblay: block;}

###試したこと
★Aにクリックでclose-openMenuクラスを付けてみた。
→そもそもドロワーメニューの外の要素だから干渉できないと思われる。
★BはAとサイズと位置を合わせてz-index:99999で設置してみた。
→そもそもナビの方がドロワーメニューよりも上に位置するのでBはAの上に重なりようがない。
★Cは普通に機能する。
→BないしAは、Cのようになりたい。。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

CSSも追記ください。また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[kei344]

コードブロック内はインデントが効くので、タブ文字か半角空白でインデントしてください。また、HTML/CSS/JavaScriptはそれぞれコードブロック化されたほうが読みやすいと思います。先頭のバッククオートに続いて ```HTML、```CSS、```JavaScriptとすると、コードハイライトが適切にかかると思います。

[kei344]

「#menuTrigger」にあたる要素が有りません。どこにありますか？ 作成されているサイトのURLを掲載されれば、回答しやすいとは思います。

[hatoQ]

★Aの<a>タグにidがついています。忘れていました。すみませんが公開できないので、部分的に抜粋しています。

Answer 1

まず指摘があります。「★」を使っている箇所がHTMLの構文として不正です。
「★B」は問題ありませんが、「<span class="close-openMenu close01">★B</span>」としなければ望まれる挙動（クリックして反応させる）になりえません。

【ul 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

許可された内容 0 個以上の <li> 要素。

---

ひとつの要素に相反する違うイベントを起こすのはプラグイン設計段階から予定していたならともかく後から変更するのは難しいです。

なので、メニュー部分に閉じるボタンをおいておくことで、望まれるような挙動に近いことは出来るのではないでしょうか。

$( function() {
	//メニューボタン
	$( '.menu-trigger' ).on( 'click', function() {
		if ( !$( '.openMenu-on' ).length ) {
			$( this ).parent().addClass( 'on-flag' );
		}
		return false;
	} );
	$( '#menuCloser' ).on( 'click', function() {
		if ( $( '.openMenu-on' ).length ) {
			$( this ).parent().removeClass( 'on-flag' );
		}
		return false;
	} );
	//モーダルウィンドウ設定 -- animatedModal.js
	$('#menuTrigger').animatedModal({
		  modalTarget: 'openMenu'
		, animatedIn: 'fadeInDown'
		, animatedOut: 'fadeOutUp'
		, animationDuration: '1s'
		, color: '#ffffff'
	} );
} );

/* 追加分 */
#menuCloser,
.on-flag #menuTrigger {
	display: none;
}
#menuTrigger,
.on-flag #menuCloser {
	display: block;
}

<li><a id="menuTrigger" class="menu-trigger" href="#openMenu">MENU</a><span id="menuCloser" class="close-openMenu" href="#openMenu">CLOSE</span></li>
```**動くサンプル：**[https://jsfiddle.net/0wdeod6d/](https://jsfiddle.net/0wdeod6d/)

Comments

[hatoQ]

ありがとうございます！ばっちり動きました！！

★はソースコードではなく、説明のために書き込んだのですが、わかりにくかったですね。次回からはコメントアウトで囲むようにします。

これは結局、ドロワーメニュー要素の外にCLOSEボタンがあっても機能するということですよね？
OPENとCLOSEを兼ねた一つの要素での実現は難しいので、同位置に別要素をそれぞれ用意してやって出しわけを切り替えたと。

本当にありがとうございました！

[kei344]

> ★はソースコードではなく、説明のために書き込んだのですが、
意図はなんとなくわかるのですが、提示されたコードがそのまま動くほうが回答者も検証がしやすいので、他でされている質問も編集してみてはいかがでしょう。

ともあれ動いたようで良かったです。