https://times-info.net/common/responsive/js/menu.js

1$(function () {
2  let isActive = 'is-active';
3
4  // ヘッダー検索メニュー
5  let $html = $('html'),
6    $nav = $('.js-headerNav'),
7    $searchBtn = $('.js-headerNavSearch'),
8    $menuBtn_open = $('.js-headerNavMenu'),
9    $searchArea = $('.js-headerSearchArea'),
10    $menuArea = $('.js-headerMenuArea'),
11    $menuBtn_close = $('.js-menuModalClose'),
12    heightWindow = window.innerHeight,
13    isFixed = 'u-fixed';
14
15  // ハンバーガーメニューモーダル
16  function menuModal() {
17    $menuBtn_open.on('click', function () {
18      $menuBtn_open.addClass(isActive);
19      $nav.addClass(isActive);
20      $menuArea.stop().fadeIn(100, 'linear').css("height", heightWindow);
21      $html.addClass(isFixed);
22      $searchBtn.removeClass(isActive);
23      $searchArea.stop().slideUp(100, 'linear');
24      $('.p-searchModal.is-overlay').remove();
25    })
26    $menuBtn_close.on('click', function () {
27      $nav.removeClass(isActive)
28      $menuArea.stop().fadeOut(100, 'linear').removeAttr('style');
29      $html.removeClass(isFixed);
30    })
31  }
32
33  let $tabMenu = $('.js-menuModalTab'),
34    $panelMenu = $('.js-menuModalPanel');
35
36  // ハンバーガーメニューのタブ切り替え
37  function menuModalTabPanel() {
38    $tabMenu.on('click', function () {
39      $panelMenu.hide().eq($tabMenu.index(this)).fadeIn(200);
40      $tabMenu.removeClass(isActive);
41      $(this).addClass(isActive);
42    });
43  }
44
45  menuModal()
46  menuModalTabPanel()
47
48  // リサイズ時の処理
49  function judgeResize() {
50    var timer = false;
51    $(window).resize(function () {
52      if (timer !== false) {
53        clearTimeout(timer);
54      }
55      timer = setTimeout(function () {
56        heightWindow = window.innerHeight;
57        $menuArea.css("height", heightWindow);
58        menuModal()
59      }, 200);
60    });
61  }
62
63  // 処理実行
64  judgeResize()
65});