JavaScriptでのハンバーガーメニューについて

前提・実現したいこと

自分の模写したコードに対し、Javascriptでハンバーガーメニューを実装したい。

ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

Javascriptを勉強し始めたばかりのものです。
スクールの課題でハンバーガメニューをJavaScriptで作ることになり、資料などを見ながら勉強しているのですがjQuelyなどの予備知識が一才ないまま勉強をしているので訳がわからなくなっています。

そこでもし可能ならばJavaScriptでのハンバーガメニューを作る際のヒントが欲しいと思い投稿させていただきました。

一応変数の指定はできていると思うのでそれ以降の流れをヒントとしていただければ嬉しいです。

試したこと

ネット上でハンバーガーメニューを作っているサイトはたくさん見たのですが、jQuelyで作っているものが多かったりコードの長さもまちまちで何から参考にしていいのか全く検討がつかないです。

＄があるものはjQuelyの書き方なんだなと調べながらにわかっているつもりなのですが・・・

maisumakun

2021/12/23 01:38

現状のコードを提示していただけませんでしょうか？

yudai1107

2021/12/23 01:52

まだ全然理解ができていないのですがここまでは書けています。 <script> const nav = document.getElementById('navi'); const hamberger = document.getElementById('hamburger-js') const black = document.getElementById('bg-back') </script> naviがナビメニューの設定 hamburgerーjsがハンバーガーボタンの設定 bgーbackが背景の設定です。全てIDタグで設定しています

nekora

2021/12/23 01:58

コメントでコードを提示しないで、質問は、編集・追記できますので、編集画面のコードブロックボタンを押して、その中に「コードの全文」を記載してください。一部抜粋ではHTMLの構造JavaScriptの全容が把握できないため答えるに答えられません。

yambejp

2021/12/23 02:02

どんな挙動にしたいかによります。またHTML要素が調整できるならCSSだけでもハンバーガーメニューは実装可能です。

maisumakun

2021/12/23 02:03

> スクールの課題でハンバーガメニューをJavaScriptで作ることになり jQueryなども使わず、ということでしょうか？

yudai1107

2021/12/23 03:26

コード自体を載せることについては全文を載せてしまうと文字数の関係で投稿できなくなってしまうのですがどのようにしたら良いでしょうか。使い方が慣れておらず申し訳ありません。

yudai1107

2021/12/23 03:34

スクールの課題はjQueryを使わずにということでした。現在目標とする挙動は以下の通りです。１ハンバーガーのアイコンを表示する（こちらは完成しています。）２ハンバーガーボタンのクリックをした後のアイコンの変更（こちらはCSSで記入済みです）【今詰まっているのはこの辺りです】 3ハンバーガーボタンをクリック→上からメニューをスライドさせる →こちらをJavaScriptでやることになっています。変数の指定はできたのですが、ここから何をしていいか断片的な知識（toggleやaddEventListenerなど）なのであまり整理ができていないかもしれないです。少し使っては見たのですが、何がどうなっているのかがわかっていないです。４❌をクリックした後にメニューが上にスライドアウトしてメニューを表示する前に戻るという流れになっています。

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

回答2件

ベストアンサー

ベースだけ参考に上げておきます
あとはどういう挙動をしたいか検討ください

javascript
1<style>
2.hamburger:not(.active):after{
3content:"\02261";
4}
5.hamburger.active:after{
6content:"\0d7";
7}
8.hamburger:not(.active) ~ nav{
9display:none;
10}
11nav{
12border:1px solid black;
13width:-moz-fit-content;
14}
15nav ul{
16list-style:none;
17margin:0;
18}
19nav>ul{
20padding:0;
21}
22nav li:not(:hover) ul{
23display:none;
24}
25</style>
26<script>
27document.addEventListener('click',e=>{
28  const t=e.target;
29  if(t.closest('.hamburger')){
30    t.classList.toggle('active');
31  }
32  if(t.closest('nav a') ||
33     !t.closest('nav,.hamburger')){
34    document.querySelector('.hamburger').classList.remove('active');
35  }
36});
37</script>
38<label>
39<div class="hamburger"></div>
40<nav>
41  <ul>
42    <li><span>AAA</span>
43      <ul>
44        <li><a href="#">aaa</a></li>
45        <li><a href="#">bbb</a></li>
46        <li><a href="#">ccc</a></li>
47      </ul>
48    </li>
49    <li><span>BBB</span>
50      <ul>
51        <li><a href="#">ddd</a></li>
52        <li><span>XXX</span>
53          <ul>
54            <li><a href="#">xxx</a></li>
55            <li><a href="#">yyy</a></li>
56            <li><a href="#">zzz</a></li>
57          </ul>
58        </li>
59        <li><a href="#">fff</a></li>
60      </ul>
61    </li>
62    <li><a href="#">ggg</a></li>
63  </ul>
64</nav>
65</label>