ハンバーガーメニュー展開時、背景のbody部分をクリックしてもハンバーガーを閉じれるようにしたい。

ハンバーガーメニューを設置し、ハンバーガーを展開した際に展開した箇所以外の部分(ハンバーガーをbodyの60%で展開するようにしているので、残りの40%の背景になっている部分)をクリックしてもハンバーガーメニューが閉じるようにしたいのですが、どのように記述すればいいかわからないためお知恵お貸しいただけますと幸いです。
jQueryプラグインのfatNavというのをDLし、カスタマイズしながら利用しています。

▼▼▼HTMLはこうなっている▼▼▼▼

HTML
1<link rel="stylesheet" href="css/jquery.fatNav.css" media="screen">
2</head>
3<body>
4<br><br><br><br>
5ハンバーガーメニューのテストページハンバーガーメニューのテストページハンバーガーメニューのテストページハンバーガーメニューのテストページハンバーガーメニューのテストページハンバーガーメニューのテストページ
6<div class="fat-nav hamberger">
7  <div class="fat-nav__wrapper">
8	  ここにメニューここにメニューここにメニューここにメニュー
9  </div>
10</div>
11<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
12<script src="js/jquery.fatNav.js"></script>
13<script>
14$(function() {
15    $.fatNav();
16});
17</script>

▼▼▼jquery.fatNav.jsの中身はこうなっている▼▼▼

jQuery
1! function (t, o, a) {
2  function i(o) {
3    this.settings = t.extend({}, e, o), this._defaults = e, this._name = n, this.init()
4  }
5  var n = "fatNav",
6    e = {};
7  t.extend(i.prototype, {
8    init: function () {
9      var o = this,
10        a = this.$nav = t(".fat-nav"),
11        i = this.$hamburger = t('<a href="javascript:void(0)" class="hamburger"><div class="hamburger__icon"></div></a>');
12      this._bodyOverflow = t("body").css("overflow"), navigator.userAgent.match(/(iPad|iPhone|iPod)/g) && a.children().css({
13        height: "110%",
14      }), t("body").append(i), t().add(i).add(a.find("a")).on("click", function (t) {
15        o.toggleNav()
16      })
17    },
18    toggleNav: function () {
19      this.toggleBodyOverflow(), t().add(this.$hamburger).add(this.$nav).toggleClass("active")
20    },
21    toggleBodyOverflow: function () {
22      var o = t("body");
23      o.toggleClass("no-scroll");
24      var a = o.hasClass("no-scroll");
25      o.css("overflow", a ? "hidden" : this._bodyOverflow)
26    }
27  }), 
28    void 0 === t[n] && (t[n] = function (t) {
29    return new i(this, t)
30  })
31}(jQuery, window, document);

こちらのURLに現在組んでいる途中のものをアップさせていただいているのですが、

https://kamp.design/haru/menusample/menu.html

ハンバーガーをクリックすると背景がグレーのメニューが表示されるようになっています。
こちらの背景が白のbody部分をクリックした際にメニューを閉じることができないでしょうか？

bodyをクリックしたら、.hamburger に付与してある .active というクラスが削除されるようにしたいです。

お知恵貸していただけましたら幸いです。

何卒よろしくお願いいたします。

行動規範の内容に同意します

回答2件

やり方はいくつかあると思うので、yhasegawa55さんが書かれているのとは少し違うやり方を書いておきますので、よければご参考に。

モーダルウインドウでよく使われる背景が暗め半透明のオーバーレイがありますよね。
要はあれと同じで、body全体に一つp要素を被せることで、そのオーバーレイをクリックしてメニューを閉じる　という形を使います。

まずは、オーバーレイ用のCSSだけ書いておきます（要素はクリック時に、appendで追加します）。
クラス名はとりあえずoverlayとしときます。

CSS
1.overlay {
2    width: 100%;
3    height: 100%;
4    position: fixed;
5    top: 0;
6    left: 0;
7    opacity: 0;
8    z-index:2; 
9}
10

で、jQueryの方は、

jQUery
1$('body').append('<p class="overlay"></p>');   //メニュを開く用clickイベント内で記述
2
3//閉じる用クリックイベント
4  $('body').on('click', '.overlay', function(){
5        $(".fat-nav").stop().animate({opacity: "hide", left: "-200"}, 200);
6        $('p.overlay').remove();
7        $('.active').remove();
8});

z-index:2;とleft: "-200" と、animateの時間200　の値は適当に書いただけですので、ご自身用に直してください。

投稿2021/05/20 05:03

編集2021/05/20 05:49

mari.rinn

総合スコア296

bodyをクリックしたら・・・でしたら

javascript
1$('body').on('click', function(){
2  $('.active').removeClass('active');
3})
4```ですが、これでは<div class="fat-nav hamberger">も含まれるので、content用のエレメントを用意してそこにイベントをセットしてください。