Xを押さなくてもメニューバーが閉じるようにしたい

Question

@media screen and (max-width: 1199px) {
  .hamburger {
    display: block;
    position: fixed;
    z-index: 3;
    right: 13px;
    top: 12px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  
    span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 6px;
      background: #fff;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
  
      &:nth-child(1) {   //三本線のスペースの設定
        top: 10px;
      }
  
      &:nth-child(2) {
        top: 20px;
      }
  
      &:nth-child(3) {
        top: 30px;
      }
    }
  
    &.active span {   //×に変更
      &:nth-child(1) {
        top: 16px;
        left: 6px;
        background: #fff;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
  
      &:nth-child(2), &:nth-child(3) {
        top: 16px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
  }
  
  /* ナビ開いてる時のボタン */
  
  nav.nav-button {
    position: fixed;
    z-index: 1;
    top: 20px; //メニューバーの高さ調整
    left: 0px;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
  
    ul {
      margin: 0 auto;
      padding: 20px;
      width: 100%;
  
      li {
        list-style-type: none;
        padding: 0;
        width: 100%;
  
        &:last-child {
          padding-bottom: 0;
        }
  
        &:hover { //リストにカーソルが乗った時に#dddに変化
          background: #ddd;
        }
  
        a {
          display: block;
          color: #fff;
          padding: 1em 0;
          text-decoration: none;
        }
      }
    }
  
    &.active {
      opacity: 100;
    }
  }

このようにscssを書いていますが、ハンバーガーメニューのxを押さないと閉じないようになっています。

しかし、他のところを押しても閉じるようにしたいです。

      .hamburger
        %span
        %span
        %span
      %nav.nav-button
        %ul.menu
          %li 
            フロントエンド
            %ul.sub
              %li
                = link_to "①HTML", card_category_path(:card_id ,1)
              %li
                = link_to "②CSS", card_category_path(:card_id, 2)
              %li
                = link_to "③Javascript", card_category_path(:card_id, 3)
          %li
            バックエンド
            %ul.sub
              %li
                = link_to "④Java", card_category_path(:card_id, 4)
              %li
                = link_to "⑤PHP", card_category_path(:card_id, 5)
              %li
                = link_to "⑥Python", card_category_path(:card_id, 6)
              %li
                = link_to "⑦Ruby", card_category_path(:card_id, 7)
          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
            = f.text_field :keyword, placeholder: "検索", class: "search-top"
            = f.submit "検索", class: "search-top"

このようにhamlはなっています。
宜しくお願い致します。

Answer 1

こんにちは。

サンプル

CSSを変更して、.nav-buttonをスクリーン全体に広げ、

  nav.nav-button {
    position: fixed;
    z-index: 1;
//    top: 20px; //メニューバーの高さ調整
    left: 0px;
//    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    width: 100%;
    height: 100vh; // 変更
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;

    .menu { // 変更
        background: rgba(0, 0, 0, 0.7);
        margin-top: 20px; //メニューバーの高さ調整
    }

    ul {

.nav-buttonクリック時に閉じるようにイベントをつけるのではどうでしょうか。

document.querySelector('.nav-button').addEventListener('click', e =>{
  if ( e.currentTarget === e.target ) {
    document.querySelector('.hamburger').classList.toggle('active');
    document.querySelector('.nav-button').classList.toggle('active');  
  }
});

Comments

[退会済みユーザー]

ご丁寧にありがとうございます！！
```
document.querySelector('.hamburger').addEventListener('click', e => {
document.querySelector('.hamburger').classList.toggle('active');
document.querySelector('.nav-button').classList.toggle('active');
});
document.querySelector('.nav-button').addEventListener('click', e => {
if (e.currentTarget === e.target) {
document.querySelector('.hamburger').classList.toggle('active');
document.querySelector('.nav-button').classList.toggle('active');
}
})
```
同じようにコードを書いたのですが、思うように動きません。。

```
nav.nav-button {
position: fixed;
z-index: 1;
// top: 20px; //メニューバーの高さ調整
left: 0px;
//background: rgba(0, 0, 0, 0.7);
text-align: center;
width: 100%;
height: 100vh;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;

.menu {
background: rgba(0,0,0,0.7);
margin-top: 20px;
}

ul {
margin: 0 auto;
padding: 20px;
width: 100%;
```

scssも同じように書いたのですが、反応しないです。。。。

どこか間違っていますでしょうか？

[Lhankor_Mhy]

・「思うように動きません」とは何が起きていますか？　具体的な現象を教えてください。
・サンプルは動作していましたか？

[退会済みユーザー]

サンプルありがとうございます。
サンプルは動いています！

```
// $(function() {
// $('.hamburger').click(function() {
// $(this).toggleClass('active');

// if ($(this).hasClass('active')) {
// $('.nav-button').addClass('active');
// } else {
// $('.nav-button').removeClass('active');
// }
// });
// });
document.querySelector('.hamburger').addEventListener('click', e => {
document.querySelector('.hamburger').classList.toggle('active');
document.querySelector('.nav-button').classList.toggle('active');
});
document.querySelector('.nav-button').addEventListener('click', e => {
if (e.currentTarget === e.target) {
document.querySelector('.hamburger').classList.toggle('active');
document.querySelector('.nav-button').classList.toggle('active');
}
})
```

このようにJavaScriptを書いているのですが、ハンバーガーメニューの三本線をプッシュするとこのようなエラーが起きてしまいます。

Uncaught TypeError: Cannot read property 'addEventListener' of null

また、JavaScriptのコメントアウトのところは自身の書いたコードにアンリます。一度コメントアウトしています。

[Lhankor_Mhy]

スクリプトは、body要素の一番最後（</body>）に配置するといいのではないかと思いますが、それが難しいようであれば、$(function() {})の中に書いてしまえばいいでしょう。

また、回答のコードをjQueryに合わせるのであれば、
$('.nav-button').click(function (e) {
if (e.currentTarget === e.target) {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.nav-button').addClass('active');
} else {
$('.nav-button').removeClass('active');
}
}
});
だと思います。（試してません）

[退会済みユーザー]

$(function() {})の中に書いてしまえばいいでしょう。
こちらは
```
$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');

if ($(this).hasClass('active')) {
$('.nav-button').addClass('active');
} else {
$('.nav-button').removeClass('active');
}
});
document.querySelector('.hamburger').addEventListener('click', e => {
document.querySelector('.hamburger').classList.toggle('active');
document.querySelector('.nav-button').classList.toggle('active');
});
document.querySelector('.nav-button').addEventListener('click', e => {
if (e.currentTarget === e.target) {
document.querySelector('.hamburger').classList.toggle('active');
document.querySelector('.nav-button').classList.toggle('active');
}
});
});
```

こちらで間違い無いでしょうか？何度もすみません。

こちらでだとエラーも起きずに反応しない状況でございます。

[Lhankor_Mhy]

jqueryで書いたコードと、サンプルのコードは片方だけの方がいいと思います。（2回クリックされたことになるので）

[退会済みユーザー]

```
$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');

if ($(this).hasClass('active')) {
$('.nav-button').addClass('active');
} else {
$('.nav-button').removeClass('active');
}
});
$('.nav-button').click(function (e) {
if (e.currentTarget === e.target) {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.nav-button').addClass('active');
} else {
$('.nav-button').removeClass('active');
}
}
});
});
```
このようにするとできました！！！
有難うございます！！
また二つほど解決したいものがありまして、
三本線がメニューを閉じるとそのままXになったままでクリックすると戻るのですが、領域外をタップすると三本線になるようにしたいです。

また、hamlがこのようになっていて
```
.Main
.Main__header
.Main__header__nav
%h1 エンジニアのための本
.hamburger
%span
%span
%span
%nav.nav-button
%ul.menu
%li
フロントエンド
%ul.sub
%li
= link_to "①HTML", card_category_path(:card_id ,1)
%li
= link_to "②CSS", card_category_path(:card_id, 2)
%li
= link_to "③Javascript", card_category_path(:card_id, 3)
%li
バックエンド
%ul.sub
%li
= link_to "④Java", card_category_path(:card_id, 4)
%li
= link_to "⑤PHP", card_category_path(:card_id, 5)
%li
= link_to "⑥Python", card_category_path(:card_id, 6)
%li
= link_to "⑦Ruby", card_category_path(:card_id, 7)
= form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
= f.text_field :keyword, placeholder: "検索", class: "search-top"
= f.submit "検索", class: "search-top"
.Main__body
.Main__body__left
.Main__body__left__top
フロントエンド
.Main__body__left__text
WebサービスやWebアプリケーションで直接ユーザーの
%br 目に触れる部分のことです。
フロントエンドの開発で利用する言語は主に、
HTMLやCSS,JavaScriptです。
.Main__body__left
.Main__body__left__top
バックエンド
.Main__body__left__text
サーバーサイドやデータベースのシステムなど、ユーザーの目に見えない部分のことです。
%br バックエンドの開発で利用する言語には、JavaやJavaScript、PHP、Python、Rubyといったプログラミング言語があります。

/フロントエンド、バックエンドの説明まで

.Content
.Content__like
%h2 オススメ一覧
.Content__like__end
フロントエンド編
```
こちらの.Contentクラスより下の方でクリックすると、戻るのですが、
Mainクラスのとこでタップしても閉じない現象が起きています。
scssが原因だと考えていますが考えてもどこが原因であるか分かりませんでした。

[退会済みユーザー]

たびたびの質問で申し訳ありません。。
とても感謝しています。。。

[Lhankor_Mhy]

ああ、そうか、こうですね。

$('.nav-button').click(function (e) {
if (e.currentTarget === e.target) {
$('.hamburger').toggleClass('active');
$('.nav-button').toggleClass('active');
}
});

追加の質問については、Haml はインデントが崩れると再現できないと思いますから、別質問を建てて他の方に聞かれた方がいいかもしれませんね。

[退会済みユーザー]

Xが戻らない現象だけ解決したいです、、、

[Lhankor_Mhy]

それは上のコードに差し替えることで上手くいきませんか？

[Lhankor_Mhy]

サンプルでは動作しますが……
https://jsfiddle.net/Lhankor_Mhy/ecpgo3jb/1/

[退会済みユーザー]

できました！！！

ありがとうございます！！
とても感謝しています。。。

function(e)のこのeとは何を表しているものでしょうか？

[Lhankor_Mhy]

イベントオブジェクトです。イベントの情報（マウスの座標とかクリックされた場所とか）が入っています。
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent

[退会済みユーザー]

ありがとうございます。

```
nav.nav-button {
position: fixed;
z-index: 1;
top: 20px; //メニューバーの高さ調整
left: 0px;
text-align: center;
width: 100%;
height: 100vh; //これが無いと領域外でタップした時の範囲が狭くなる
opacity: 0;
transition: opacity .6s ease, visibility .6s ease; //メニューが出てくるのに対して時間を設定
```
こちらの
```
height: 100vh;
```

このコードがあると他の下の方にあるリンクなどがクリックできなくなっています。。。

しかし、こちらを外してしますと、領域外でクリックした時に反応しなくなります。。。

どのようにすればいいでしょうか？？

[Lhankor_Mhy]

あーなるほど。
そうですね、display:noneにしてないのですから、そうなっちゃいますね。

pointer-eventsでコントロールするのはどうでしょうか？
https://jsfiddle.net/Lhankor_Mhy/ecpgo3jb/2/

[退会済みユーザー]

できました。。。。。

本当にたくさんありがとうございます。

また何かありましたらその際は是非お願いできたら嬉しく思います。

[Lhankor_Mhy]

お力になれることがあれば喜んで。

[退会済みユーザー]

ありがとうございます！！

[退会済みユーザー]

pointer-events: none;
を入れてしまうと、先ほど多分リロードしてなくてできたと勘違いしていたのか、できていません。。。
またフロントエンド、バックエンドにカーソルを持っていくと、
HTML,cssなどが表示されないです。。。
すみません。。

[退会済みユーザー]

｀｀｀
@media screen and (max-width: 1199px) {
.hamburger {
display: block;
position: fixed;
z-index: 3;
right: 13px;
top: 12px;
width: 42px;
height: 42px;
cursor: pointer;
text-align: center;

span {
display: block;
position: absolute;
width: 30px;
height: 2px;
left: 6px;
background: #fff;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;

&:nth-child(1) { //三本線のスペースの設定
top: 10px;
}

&:nth-child(2) {
top: 20px;
}

&:nth-child(3) {
top: 30px;
}
}

&.active span { //×に変更するためのコード
&:nth-child(1) {
top: 16px;
left: 6px;
background: #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

&:nth-child(2), &:nth-child(3) {
top: 16px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}

// ナビ開いてる時のボタン

nav.nav-button {
position: fixed;
z-index: 1;
top: 20px; //メニューバーの高さ調整
left: 0px;
text-align: center;
width: 100%;
height: 100vh; //これが無いと領域外でタップした時の範囲が狭くなる
opacity: 0;
transition: opacity .6s ease, visibility .6s ease; //メニューが出てくるのに対して時間を設定
pointer-events: none;
.menu {
background: rgba(0,0,0,0.7);
margin-top: 20px;
}

ul {
margin: 0 auto;
padding: 20px;
width: 100%;

li {
list-style-type: none;
padding: 0;
width: 100%;

&:last-child { //プルダウンメニューのしたの余白
padding-bottom: 0;
}

&:hover { //リストにカーソルが乗った時に#dddに変化
background: #ddd;
}

a {
display: block;
}
}
}

&.active { // このクラスを、jQueryで付与・削除する
opacity: 100;
}
}
｀｀｀
このようにscssなっています。。。

[Lhankor_Mhy]

わかりにくくて申し訳ないのですが、pointer-events は2か所に設定する必要があります。
先ほどのサンプルを確認してみてください。

[退会済みユーザー]

こちらの確認不足でした。すみません。
サンプル本当にありがとうございました。

感謝しています。