ハンバーガーメニュー　リンクに飛んだ際閉じたいのですが

ハンバーガーメニューの実装で、
メニューにリンクをつけたのですがリンクに飛んでも右側にメニューが表示されたままで、ハンバーガメニューも右上に固定しているためわざわざ上に戻って閉じないとメニューが表示されたままで使用しづらいです。

同じような質問を探したのですがいまいちわからなかったのでこちらで質問させていただきました。
中身省略してます。

長々としてお手数おかけしますが宜しくお願いいたします。

html,JavaScript
1  <body>
2    <div id="menu">
3
4      <ul>
5        <li><a href="#" id="link">TOP</a></li>
6        <li><a href="#about" id="link">ABOUT</a></li>
7        <li><a href="#section1" id="link">SECTION1</a></li>
8        <li><a href="#section2" id="link">SECTION2</a></li>
9        <li><a href="#section3" id="link">SECTIN3</a></li>
10        <li><a href="#contact" id="link">CONTACT</a></li>
11        <li><a href="#link" id="link">LINK</a></li>
12      </ul>
13    </div>
14
15    <div id="main">
16      <i class="fa fa-bars" id="show"></i>
17
18      <section id="about">
19        <h1>ABOUT</h1>
20        <p>hello world.hello world.hello world.hello world.hello world.hello world.hello world.hello world.hello world.hello world.hello world.hello world.hello world.</p>
21
22     
23    </div>
24
25    <script>
26      (function() {
27        'use strict';
28
29        var show = document.getElementById('show');
30        var main = document.getElementById('main');
31
32        show.addEventListener('click', function() {
33          if (main.className === 'open-menu') {
34            main.className = '';
35          } else {
36            main.className = 'open-menu';
37          }
38        });
39
40      })();
41    </script>
42  </body>
43</html>
44
45
46```css
47body {
48    margin: 0;
49    padding: 0;
50    font-family: 'Courier New',monospace;
51    font-size: 25px
52  }
53
54  #menu {
55    position: absolute;
56    top: 0;
57    right: 0;
58    color: #fff;
59    background: rgb(61, 148, 230);
60    padding: 8px;
61    box-sizing: border-box;
62    width: 180px;
63    min-height: 100%;
64  }
65
66  #menu ul {
67    list-style-type: none;
68  }
69
70  #menu li {
71    margin: 10px auto;
72  }
73
74  #menu a {
75    text-decoration: none;
76    cursor: pointer;
77  }
78
79  #show {
80      float: right;
81      cursor: pointer;
82  }
83
84  #main {
85      z-index: 1;
86      background: #fff;
87      position: absolute;
88      top: 0;
89      left: 0;
90      box-sizing: border-box;
91      padding: 10px;
92      width: 100%;
93      height: 100%;
94      overflow: auto;
95      transition: .4s;
96  }
97
98  #main.open-menu {
99      left: -180px;
100  }
101

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

回答2件

解決済みですか、せっかく作成したので、ご参考までに。

js
1'use strict';
2
3var show = document.getElementById('show');
4var main = document.getElementById('main');
5
6show.addEventListener('click', function() {
7  if (main.className === 'open-menu') {
8    main.className = '';
9  } else {
10    main.className = 'open-menu';
11  }
12});
13// 以下を追加
14var menus = document.querySelectorAll("#menu a");
15menus.forEach(function(menu) {
16  menu.addEventListener('click', function() {
17      main.className = '';
18  });
19});

Codepenサンプル

forEach を使うとシンプルに記述できます。
メニューのクリック時は閉じるだけでいいですね。

投稿2020/04/04 08:30

hatena19

総合スコア34075

insomnia00111

2020/04/04 09:11

シンプルでとても理解しやすく参考になりました。有難うございます。

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

ベストアンサー

「aタグをクリックしたとき」の処理を追加すればOKと思います。

実行はしていないのですが、いかのような形で行けると思います。

JavaScript
1    <script>
2      (function() {
3        'use strict';
4
5        var show = document.getElementById('show');
6        var main = document.getElementById('main');
7
8        show.addEventListener('click', function() {
9          if (main.className === 'open-menu') {
10            main.className = '';
11          } else {
12            main.className = 'open-menu';
13          }
14        });
15
16        // 以下を追加
17        let elm = document.querySelectorAll('#menu a');
18        for(let i = 0; i < elm.length; i++) {
19          elm[i].addEventListener('click', function() {
20            // 以下の記述は共通なので関数化をおすすめします。
21            if (main.className === 'open-menu') {
22              main.className = '';
23            } else {
24              main.className = 'open-menu';
25            }
26          });
27        }
28        
29      })();
30    </script>