質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,460

score 41

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;
      }


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • musashidayo

    2018/02/20 14:49

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

    キャンセル

  • x_x

    2018/02/20 14:51

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

    キャンセル

  • musashidayo

    2018/02/20 14:59

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

    キャンセル

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • タブとハンバーガーメニューの同時実装(jQuery)重なり合った要素の調整がうまくいきません