jqueryを使用したハンバーガーメニュー　画面によるメニューの切り替えについて

##【実現したいこと】

画面幅によって、ヘッダーのメニューを切り替えを実装したいと考えております。

##【前提】

ヘッダーのメニューを画面幅によって切り替えるサンプルを作成しております。
jqueryを使用してハンバーガーメニューを作成しているのですが、
いくつか問題点がありわからない部分がありましたので質問させて頂きました。

①画面幅によってメニューを切り替えする部分までは出来たのですが、
一度ハンバーガーメニューを展開させた後に再度画面幅を広げるとメニューが表示しなくなる現象です。
恐らくjquery側を変更するとうまくいくのだと思うのですが、どう記入するのが一番良いのかが分からなくお聞きしました。

$('#js-hamburger').click(function () {
$('body').toggleClass('is-drawerActive')
if ($(this).attr('aria-expanded') == 'false') {
$(this).attr('aria-expanded', true)
$('#js-global-menu').css('visibility', 'visible')
$('#js-global-menu').attr('aria-hidden','false')
} else {
$(this).attr('aria-expanded', false)
$('#js-global-menu').css('visibility', 'hidden')
$('#js-global-menu').attr('aria-hidden','true')
}
})

※ハンバーガーメニューを閉じた際に上記の太字部分情報を保持しているまま画面幅を変えると表示しないのだということまでは分かりました。

②HTML側でハンバーガーメニューにもフォーカスが当たるようにしたいのですが、
ハンバーガーメニューにタブキーでフォーカスを当てることが出来ません。
フォーカスを当てるためにbutton要素で作成しました・・・。

③その他このコードはこうした方がいいなどアドバイスなどあれば教えて頂きたいです。

##【該当のソースコード】

html
1<!DOCTYPE html>
2<html lang="js">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>ハンバーガー</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9<body>
10  <header>
11    <button type="button" id="js-hamburger" class="button hamburger" tabindex="0" aria-controls="js-glabal-menu" aria-expanded="false" aria-label="メニューを開閉する">
12      <span class="hamburger__line">
13      </span>
14    </button>
15    <div class="header-container">
16      <div class="header-logo">1234
17      </div>
18      <div class="sp-global-menu" id="js-global-menu" aria-hidden="true">
19        <nav>
20          <ul>
21            <li><a href="#list1">リスト１</a></li>
22            <li><a href="#list2">リスト２</a></li>
23            <li><a href="#list3">リスト３</a></li>
24            <li><a href="#list4">リスト４</a></li>
25          </ul>
26        </nav>
27      </div><!-- /.sp-header-menu -->
28  </div>
29  </header>
30  <main>
31
32    <div id="list1">
33      <h2>リスト１</h2>
34    </div>
35
36    <div id="list2">
37      <h2>リスト２</h2>
38    </div>
39
40    <div id="list3">
41      <h2>リスト３</h2>
42    </div>
43
44    <div id="list4">
45      <h2>リスト４</h2>
46    </div>
47
48  </main>
49  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
50  <script src="main.js"></script>
51</body>
52</html>

css
1
2html {
3  scroll-padding-top: 80px; 
4}
5
6body {
7  margin: 0;
8  box-sizing: border-box;
9}
10
11body.is-drawerActive{
12  overflow: hidden;
13}
14
15header {
16  height: 80px;
17  width: 100%;
18  border-bottom: 1px solid #000;
19  position: fixed;
20  top: 0;
21  left: 0;
22  background: #0A5;
23}
24
25.header-logo{
26  font-size: 2.5rem;
27  padding: 20px 0 20px 10px;
28  line-height: 1;
29  color: #fff;
30}
31
32.button {
33  display: inline-block;
34  text-decoration: none;
35  -webkit-appearance: none;
36  -moz-appearance: none;
37  appearance: none;
38  border: none;
39  background-color: transparent;
40  cursor: pointer;
41}
42
43.header-container{
44  display: flex;
45  align-items: center;
46  justify-content: space-between;
47  padding: 0 10px;
48}
49
50.hamburger {
51  position: fixed;
52  top: 16px;
53  right: 20px;
54  z-index: 3;
55  width: 48px;
56  height: 48px;
57  border-radius: 50%;
58  border: 1px solid #333;
59  box-shadow: 0 0 2rem transparent;
60  outline: none;
61  -webkit-transition: all .3s ease-in-out;
62  transition: all .3s ease-in-out;
63  visibility: hidden;
64}
65
66.hamburger:hover, .hamburger:focus {
67  box-shadow: 0 0 0.5rem rgba(161, 161, 161, 0.5);
68}
69
70.hamburger__line {
71  position: absolute;
72  top: 0;
73  right: 0;
74  bottom: 0;
75  left: 0;
76  margin: auto;
77  width: 18px;
78  height: 2px;
79  background-color: #333;
80  -webkit-transition: inherit;
81  transition: inherit;
82}
83
84.hamburger__line::before, .hamburger__line::after {
85  position: absolute;
86  display: block;
87  width: 100%;
88  height: 100%;
89  background-color: inherit;
90  content: '';
91  -webkit-transition: inherit;
92  transition: inherit;
93}
94
95.hamburger__line::before {
96  top: -5px;
97}
98
99.hamburger__line::after {
100  top: 5px;
101}
102
103.hamburger[aria-expanded="true"] {
104  border: 1px solid #fff !important;
105}
106
107.hamburger[aria-expanded="true"] .hamburger__line {
108  background-color: transparent;
109}
110
111.hamburger[aria-expanded="true"] .hamburger__line::before, .hamburger[aria-expanded="true"] .hamburger__line::after {
112  top: 0;
113  background-color: #fff;
114}
115
116.hamburger[aria-expanded="true"] .hamburger__line::before {
117  -webkit-transform: rotate(45deg);
118  -ms-transform: rotate(45deg);
119  transform: rotate(45deg);
120}
121
122.hamburger[aria-expanded="true"] .hamburger__line::after {
123  -webkit-transform: rotate(-45deg);
124  -ms-transform: rotate(-45deg);
125  transform: rotate(-45deg);
126}
127
128.sp-global-menu{
129  visibility: visible;
130}
131
132
133.sp-global-menu ul{
134  display: flex;
135}
136
137
138.sp-global-menu li{
139  list-style: none;
140  margin-right: 15px;
141}
142
143.sp-global-menu li:last-child{
144  margin-right: 0;
145}
146
147
148.sp-global-menu a{
149  text-decoration: none;
150  color: #fff;
151}
152
153#list1 {
154  margin-top: 80px;
155}
156
157#list1,#list2,#list3,#list4{
158  height: 1000px;
159}
160
161@media(max-width:768px){
162
163.hamburger{
164  visibility: visible;
165}  
166
167.sp-global-menu {
168  position: fixed;
169  width: 100vw;
170  top: 0;
171  right: 0;
172  bottom: 0;
173  overflow: hidden;
174  height: 100vh;
175  background-color: #000;
176  color: #fff;
177  text-align: center;
178  visibility: hidden;
179}
180
181.sp-global-menu ul{
182  padding-left: 0;
183  flex-direction: column;
184  justify-content: center;
185  height: 100vh;
186}
187
188
189.sp-global-menu li{
190  margin-bottom: 50px;
191  margin-right: 0;
192}
193}

jquery
1
2$(function () {
3    $('#js-hamburger').click(function () {
4    $('body').toggleClass('is-drawerActive')
5      if ($(this).attr('aria-expanded') == 'false') {
6        $(this).attr('aria-expanded', true)
7        $('#js-global-menu').css('visibility', 'visible')
8        $('#js-global-menu').attr('aria-hidden','false')
9      } else {
10        $(this).attr('aria-expanded', false)
11        $('#js-global-menu').css('visibility', 'hidden')
12        $('#js-global-menu').attr('aria-hidden','true')
13      }
14    })
15
16    $('#js-global-menu a').click(function () {
17      if ($('#js-hamburger').attr('aria-expanded') == 'true') {
18        $('#js-hamburger').attr('aria-expanded', true)
19        $('#js-global-menu').css('visibility', 'hidden')
20        $('#js-global-menu').attr('aria-hidden','true')
21        
22      }
23    })
24   });

まだまだ駆け出しでjqueryにつまずいております・・・。
詳しい方おりましたら、質問の返答・アドバイス等頂けると大変助かります。

よろしくお願いします。

Lhankor_Mhy

2023/08/15 05:18

jQuery UI の質問タグが付いていますが、コードを見る限りそれを使用していなさそうなので、関係ないのであれば削除することをおすすめします。

chin0109

2023/08/15 05:25

Lhankor_Mhy様申し訳ございません。不備がございましたので修正させて頂きました。ありがとうございます。

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

回答1件

①
matchMedia を使うのがいいかもしれません。

クエリーの通知の受信 | プログラムによるメディアクエリーの評価 - CSS: カスケーディングスタイルシート | MDN

②
それでいいと思います。

キーボード入力で対話的にフォーカスを設定できるようにするために、対話型コンテンツではないものに tabindex 属性を組み合わせて使用することは避けてください。例えば、 <button> 要素を使用する代わりに <div> 要素を使用してボタンを記述する場合などです。
tabindex - HTML: ハイパーテキストマークアップ言語 | MDN

③
PCでの初期状態でメニューがaria-hidden="true"となっているのは、違うのではないかと思います。
CSS属性セレクタで、ARIAロールとスタイルを結び付けた方が混乱は少ないかもしれません。

投稿2023/08/15 06:07

Lhankor_Mhy

総合スコア37488

chin0109

2023/08/15 07:51

Lhankor_Mhy様ご回答ありがとうございます！！！理解力が少なくて少なくて大変申し訳ないです（ ; ; ） ①についてコードを追加してみましたがうまく適用されていないのか、挙動が思うようにうまく動きません・・・【追加コード】 $('#js-global-menu').css('visibility', 'visible'); // ウィンドウサイズ768px以上の場合は最初から表示 if (window.matchMedia('(max-width:768px)').matches) { /* ウィンドウサイズ669以上、767以下の処理を記述 */ $('#js-global-menu').css('visibility', 'hidden'); }　　このコードだけだと不備がございますでしょうか・・・？ ②はそのままで良いとの事でみて頂きありがとうございます。 ③のaria-hidden="true"の部分ですが、確かにpcでの初期状態ではaria-hidden="true"だとおかしかったですね（ ; ; ）CSS属性セレクタで、ARIAロールとスタイルを結び付けた方が混乱がないとの事でしたが、もう少しどんなふうにしたら良いかなど教えて頂くことは可能でしょうか。お忙しいところお手数ですがご教授ください・・・。

Lhankor_Mhy

2023/08/16 14:08 編集

① たとえば、こうでしょうか（詳細は詰めて考えてないです）。 const mql = window.matchMedia('(max-width:768px)'); function screenCheck(e) { if (e.matches) { $('#js-global-menu').css('visibility', 'hidden') $('#js-global-menu').attr('aria-hidden', 'true') } else { $('#js-hamburger').attr('aria-expanded', false); $('#js-global-menu').css('visibility', 'visible') $('#js-global-menu').attr('aria-hidden', 'false') } } mql.addEventListener('change', screenCheck); screenCheck(mql); ③ .sp-global-menu[aria-hidden="true"]{ visibility: hidden } などとすれば、aria-hidden="true" なのに表示されている、というようなことが起きにくくなるかなあ、と思いました。

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