タブとハンバーガーメニューの同時実装(jQuery)重なり合った要素の調整がうまくいきません

Question

wordpressを使ってタブ機能とハンバーガーメニューを実装しようとしているのですが、z-indexをいくら調整しても互いの要素が重なってしまい、上手い具合に表示されません。どなたか同じような機能を実装されてる方アドバイスをお願いします。

html
<!--ここがハンバーガーメニュー部分-->
			<div class="MenuContainer">
				<input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/>
				<label for="menu" class="MenuIcon"></label>
				<h2 class="MenuHeader">Menu</h2>
				<nav class="Menu">
					<ul class="Menu-list">
						<li class="Menu-item"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" class="Menu-link">トップ</a></li>
						<li class="Menu-item"><a href="" target="_blank" class="Menu-link"></a></li>
						<li class="Menu-item"><a href="" target="_blank" class="Menu-link"></a></li>
					</ul>
				</nav>
			</div>	
<!--ハンバーガーメニューここまで-->
<!--ここからタブ部分-->
<div class="ChangeElem_Btn_Content">
            <button class="ChangeElem_Btn ChangeElem_Btn_1">1</button>
            <button class="ChangeElem_Btn">2</button>
            <button class="ChangeElem_Btn">3</button>
            
</div>
<ul>
  <li class="ChangeElem_Panel">タブ中身</li>
  <li class="ChangeElem_Panel">タブ中身</li>
      .
      .
      .
  <li class="ChangeElem_Panel">タブ中身</li>
<ul>

css
.HiddenCheckbox {
		display: none;
	  }
	  .MenuContainer {
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		padding: 20px;
		width: 90%;
		height: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 1;
	  }
	  .MenuHeader {
		color: #999999;
		display: inline-block;
		float: left;
		font-weight: 100;
		line-height: 30px;
		margin: 0 0 0 15px;
		opacity: 0;
		position: relative;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
		-webkit-transition: -webkit-transform 0.6s, opacity 0.5s;
		transition: transform 0.6s, opacity 0.5s;
		z-index: 2;
	  }
	  .MenuIcon {
		cursor: pointer;
		display: block;
		float: left;
		height: 30px;
		position: relative;
		width: 30px;
		z-index: 2;
	  }
	  .MenuIcon::before {
		-webkit-box-shadow: #999999 0 12px 0;
		box-shadow: #999999 0 12px 0;
		height: 6px;
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
		width: 30px;
	  }
	  .MenuIcon::after {
		bottom: 0;
		height: 6px;
		-webkit-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
		transform-origin: left bottom;
		width: 30px;
	  }
	  .MenuIcon::before,
	  .MenuIcon::after {
		background: #999999;
		display: block;
		content: '';
		position: absolute;
		-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;
		transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
	  }
	  .Menu {
		background: #f5fffd;
		bottom: 0;
		left: -90%;
		position: absolute;
		top: 0;
		width: 90%;
		-webkit-transition: left 0.4s;
		transition: left 0.4s;
	  }
	  .HiddenCheckbox:checked ~ .MenuHeader {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	  }
	  .HiddenCheckbox:checked ~ .MenuIcon::before {
		-webkit-box-shadow: transparent 0 0 0;
		box-shadow: transparent 0 0 0;
		-webkit-transform: rotate(45deg) translate3d(6px, -3px, 0);
		transform: rotate(45deg) translate3d(6px, -3px, 0);
	  }
	  .HiddenCheckbox:checked ~ .MenuIcon::after {
		-webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0);
		transform: rotate(-45deg) translate3d(6px, 3px, 0);
	  }
	  .HiddenCheckbox:checked ~ .Menu {
		left: 0;
	  }
	  .Menu-list {
		list-style-type: none;
		margin: 60px 0 0;
		padding: 0;
	  }
	  .Menu-item {
		margin: 0;
		text-align: left;
	  }
	  .Menu-link {
		color: #00C9A9;
		display: block;
		overflow: hidden;
		padding: 8px 22px;
		position: relative;
		text-decoration: none;
		z-index: 1;
	  }
	  .Menu-link::before {
		background: #444;
		bottom: 0;
		content: '';
		left: 0;
		position: absolute;
		right: 100%;
		top: 0;
		-webkit-transition: right 0.4s;
		transition: right 0.4s;
		z-index: -1;
	  }
	  .Menu-link::after {
		content: attr(href);
		color: #fff;
		float: right;
		opacity: 0;
		-webkit-transition: opacity 0.8s, -webkit-transform 0.4s;
		transition: opacity 0.8s, transform 0.4s;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	  }
	  .Menu-link:hover::before {
		right: 0;
	  }
	  .Menu-link:hover::after {
		opacity: 0.5;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }
       .ChangeElem_Panel{
          display: none;
       }

jQuery
$(function () {
  /*初期表示*/
  $('.ChangeElem_Panel').hide();
  $('.ChangeElem_Panel').eq(0).show();
  $('.ChangeElem_Btn').eq(0).addClass('is-active');
  /*クリックイベント*/
  $('.ChangeElem_Btn').each(function () {
    $(this).on('click', function () {
      var index = $('.ChangeElem_Btn').index(this);
      $('.ChangeElem_Btn').removeClass('is-active');
      $(this).addClass('is-active');
      $('.ChangeElem_Panel').hide();
      $('.ChangeElem_Panel').eq(index).show();
    });
  });
});

これにmodernizr.jsを読み込んでいます

または、参考になるURLなどあれば貼っていただけるとありがたいです。

追記

jQuery(function($){
		$(function () {
			/*クリックイベント*/
			$('.MenuIcon').toggle(
				function(){
					$('.MenuContainer').addClass('is-activee');
				},
				function(){
					$('.MenuContainer').removeClass('is-activee');
				});
			});
		});

.is-activee{
		z-index: 100;
	  }

試しに上記の記述をしてみた所、今度はハンバーガーメニューのボタンが反応しなくなりました。

Comments

[kszk311]

メニューが手前にきてしまうため、タブのボタンが押せないということでよろしいでしょうか。「うまくいかない」「上手い具合に表示されない」だと、どうしたいのか分からないので、具体的にどうしたいのかを教えてください。

[musashidayo]

言葉足らずで申し訳ありません。どちらかを前に出してしまうと、片方が押せなくなってしまうので、それを解消したいです。

[x_x]

zをいくら調整しても、xあるいはy方向にずらさないと解決しないのではないでしょうか？ どういうのが理想なのでしょう？

[musashidayo]

ハンバーガーメニューを折りたたんでいる状態だとタブが反応して、ハンバーガーメニューを出していると展開された要素(Menu-listとメニューを収納するボタン)だけが反応するのが理想です。

[x_x]

ちょっとよくわかりません。図示できないでしょうか？

[musashidayo]

◎←この内側の○がタブで外側の○がMenuContainerという関係になっているようで、重なっている領域だとタブ切り替えのボタンが反応しないというのが現状です。そこで、ハンバーガーメニューが展開されてないときに、◎の関係を逆にしてタブをz-indexで前に出したところ、今度はハンバーガーメニューを展開したときにもタブのボタンが前に表示されるようになってしまいました。

Answer 1

遅くなりましたが、JSでお互いが被らないタイミングでhiddenを使ったら解決できました。