ドロップダウンメニューをぬるっと動くようにしたい

実現したいこと

ハンバーガーメニュー内のドロップダウンメニューをクリックした際に、サブメニューが表示されるようにしているのですが、これを動きのある感じにしたいです。
イメージとしては、PC画面でのドロップダウンメニューをホバーした際に表示されるサブメニューの動きをハンバーガーメニュー内でも同じ動きを加えたいです。

発生している問題・分からないこと

クリックした際に表示されるまではできましたが、動きを加えるにはどこをどう書き加えればいいのでしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1">
6	<title></title>
7	<link rel="stylesheet" href="css/destyle.css"> 
8	<link rel="stylesheet" type="text/css" href="css/style.css">
9	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
10</head>
11<body>
12 <!-- ヘッダーパターン3 -->
13  <header class="l-header p-header">
14    <div class="p-header__inner">
15      <img src="img.png" class="header_logo">
16      <div class="p-header__hamburger">
17        <button class="c-hamburger">
18          <span></span>
19          <span></span>
20          <span></span>
21        </button>
22      </div>
23      <nav class="p-header__nav p-nav">
24        <div class="p-nav__inner">
25          <ul class="p-nav__list">
26            <li class="p-nav__item">
27              <a href="" class="p-nav__link">
28                メニュー
29              </a>
30            </li>
31            <li class="p-nav__item">
32              <a href="" class="p-nav__link">
33                メニュー
34              </a>
35            </li>
36            <li class="p-nav__item p-nav__item--acMenu">
37              <p href="" class="p-nav__link">
38                メニュー
39              </p>
40              <ul class="p-nav__middle">
41                <li class="p-nav__middleItem">
42                  <a href="" class="p-nav__link p-nav__middleLink">メニュー</a>
43                </li>
44                <li class="p-nav__middleItem">
45                  <a href="" class="p-nav__link p-nav__middleLink">メニュー</a>
46                </li>
47              </ul>
48            </li>
49            <li class="p-nav__item">
50              <a href="" class="p-nav__link">
51                メニュー
52              </a>
53            </li>
54            <li class="p-nav__item">
55              <a href="" class="p-nav__link">
56                メニュー
57              </a>
58            </li>
59
60          </ul>
61        </div>
62      </nav>
63    </div>
64  </header>
65
66  <main>
67    メインコンテンツ
68  </main>
69  <footer>フッター</footer>
70</body>
71<script type="text/javascript" src="js/javascript.js"></script>
72</html>

css
1main {
2  background-color: skyblue;
3  width: 100%;
4  height: 1000px;
5}
6
7footer {
8  width: 100%;
9  height: 100px;
10  background-color: rgb(249, 205, 121);
11}
12
13.header_logo{
14  width: 5rem;
15}
16
17/* パターン3 */
18.l-header {
19  display: block;
20  z-index: 999;
21  position: fixed;
22  top: 0;
23  right: 0;
24  left: 0;
25  width: 100%;
26  background: #333;
27}
28
29
30.c-hamburger {
31  position: relative;
32  width: inherit;
33  height: inherit;
34  margin: 0;
35  border: transparent;
36  background-color: transparent;
37  cursor: pointer;
38}
39
40
41.c-hamburger span {
42  display: block;
43  position: relative;
44  left: 50%;
45  width: 24px;
46  height: 2px;
47  transform: translateX(-50%);
48  background: black;
49  transition: all 0.4s;
50}
51
52.c-hamburger span:nth-of-type(1) {
53  top: -4px;
54}
55
56.c-hamburger span:nth-of-type(2) {
57  top: 1px;
58
59  transform: translateX(-0.45deg);
60}
61
62.c-hamburger span:nth-of-type(3) {
63  top: 6px;
64  transform: translateX(-0.45deg);
65}
66
67
68
69.c-hamburger.is-active span:nth-of-type(1) {
70  top: 0;
71  transform: translateX(-50%) rotate(225deg);
72}
73
74.c-hamburger.is-active span:nth-of-type(2) {
75  opacity: 0;
76}
77
78.c-hamburger.is-active span:nth-of-type(3) {
79  top: -4px;
80  transform: translateX(-50%) rotate(-225deg);
81}
82
83
84
85
86.p-header__nav {
87  display: flex;
88  z-index: 10;
89  position: absolute;
90  top: 0;
91  right: 0;
92
93  align-items: center;
94  justify-content: center;
95  width: 100%;
96  height: 100vh;
97  background: transparent;
98  opacity: 0;
99  transition: opacity .3s;
100}
101
102.p-header__inner {
103  display: flex;
104  align-items: center;
105  justify-content: space-between;
106  height: inherit;
107  padding-left: 20px;
108
109}
110
111
112
113
114.p-header__hamburger {
115  z-index: 100;
116  position: absolute;
117  top: 0;
118  right: 0;
119  width: 95px;
120  height: 100%;
121}
122
123.p-header__nav.is-active {
124  position: fixed;
125  top: 0;
126  right: 0;
127  opacity: 1;
128  background-color: #fff;
129}
130
131
132
133.p-nav__list {
134  display: block;
135  padding-right: 20px;
136  padding-left: 20px;
137
138
139}
140
141.p-nav__item {
142  display: inline-block;
143  position: relative;
144  transition: .4s;
145}
146
147
148.p-nav__link {
149  color: #fff;
150  display: block;
151  padding: 20px;
152  cursor: pointer;
153
154}
155
156.p-nav__item.p-nav__item--acMenu>.p-nav__link {
157  position: relative;
158}
159
160.p-nav__item.p-nav__item--acMenu>.p-nav__link::after {
161  position: absolute;
162  content: "▼";
163  right: 0;
164  top: 50%;
165  transform: translateY(-50%);
166
167}
168
169
170.p-nav__middle {
171  display: none;
172}
173
174.p-nav__middleItem a::before {
175  margin-right: 8px;
176  margin-left: 8px;
177  content: "-";
178}
179
180
181.p-nav__item.is-open .p-nav__middle {
182  display: block;
183}
184
185@media screen and (min-width: 768px) {
186
187  .p-header__hamburger {
188    display: none;
189  }
190
191  .p-nav__inner {
192    margin-right: auto;
193    margin-left: auto;
194    max-width: initial;
195    width: 100%;
196
197  }
198
199  .p-header__nav {
200    position: static;
201    opacity: 1;
202    height: inherit;
203    width: initial;
204    width: 100%;
205    max-width: fit-content;
206  }
207
208  .p-nav__list {
209    padding-right: 0;
210    padding-left: 0;
211    display: flex;
212    flex-direction: row;
213
214  }
215  .p-nav__item {
216    padding: 0 1rem;
217  }
218  .p-nav__item ul {
219    position: absolute;
220    top: 100%;
221    left: 0;
222    min-width: 100%;
223    margin: 0;
224    padding: 0;
225  }
226  .p-nav__list .p-nav__item:last-child{
227    background: #081231;
228  }
229  .p-nav__list .p-nav__item:last-child a{
230    color: #fff;
231  }
232
233
234  .p-nav__item ul li {
235    width: 100%;
236    height: 0;
237    overflow: hidden;
238    transition: all 0.1s;
239  }
240
241  .p-nav__item ul li a {
242
243    display: flex;
244    align-items: center;
245    padding: 13px 20px 13px 10px;
246    color: #fff;
247  }
248  
249  .p-nav__list .p-nav__item:hover{
250    background: #1b3a72;
251  }
252  .p-nav__item:hover>ul>li {
253    height: 48px;
254    overflow: visible;
255    background-color: rgba(44, 192, 255, 0.6);
256  }
257
258  .p-nav__item:hover>ul>li:not(:first-child) {
259    border-top: 1px solid #fff;
260  }
261
262  .p-nav__item:hover>ul>li.p-nav__middleItem:hover {
263    background-color: rgba(255, 255, 255, 0.1);
264  }
265
266  .p-nav__item:hover>ul>li.p-nav__middleItem:hover a {
267    color: #2C2C2C;
268  }
269
270  .p-nav__middle {
271    display: block;
272    text-align: left;
273  }
274
275  .p-nav__middleItem {
276    position: relative;
277  }
278
279  .p-nav__middleItem a {
280    position: relative;
281    white-space: nowrap;
282  }
283
284}
285
286@media screen and (max-width: 767px){
287  .p-nav__inner{
288    display: flex;
289    justify-content: center;
290  }
291  .p-nav__list {
292    width: 50%;
293  }
294  .p-nav__item {
295    width: 100%;
296  }
297  .p-nav__link {
298    color: #2e61b3;
299  }
300}

JavaScript
1document.addEventListener('DOMContentLoaded', function () {
2  const hamburger = document.querySelector('.c-hamburger');
3  const headNav = document.querySelector('.p-header__nav');
4
5
6  if (!hamburger) {
7    return false;
8  }
9
10  hamburger.addEventListener('click', () => {
11    if (hamburger.classList.contains("is-active")) {
12      hamburger.classList.remove('is-active');
13      headNav.classList.remove('is-active')
14    } else {
15      hamburger.classList.add('is-active');
16      headNav.classList.add('is-active')
17    }
18
19  });
20
21  headNav.addEventListener('click', () => {
22    hamburger.classList.remove('is-active');
23    headNav.classList.remove('is-active')
24  });
25});
26
27
28
29
30document.addEventListener('DOMContentLoaded', function() {
31
32  const acMenuItems = document.querySelectorAll('.p-nav__item--acMenu');
33
34  acMenuItems.forEach(item => {
35
36    item.addEventListener('click', function(event) {
37
38      event.stopPropagation();
39
40      item.classList.toggle('is-open');
41    });
42  });
43
44  document.addEventListener('click', function(event) {
45
46    acMenuItems.forEach(item => {
47
48      if (!item.contains(event.target)) {
49        item.classList.remove('is-open');
50      }
51    });
52  });
53});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

自分なりに色々と変更をしてみましたがうまく動きませんでした。
jQueryのプラグイン等を使った方が早いのでしょうか？

補足

特になし

yambejp

2025/04/03 06:10

念の為確認ですが、ハンバーガーメニューアイコンをクリックしたときにスライドインしたいのでしょうか？それともメニューの３番目のサブメニューだけ開閉をぬるっとしたいのでしょうか？

keel

2025/04/03 06:19

３番目のサブメニューだけです。

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

回答2件

ベストアンサー

新しめのCSSを使うとこんな感じです。今のところChromeだけでしか動かないですが、一応フォールバックを入れてます。来年ぐらいにはSafariも対応してくれる……といいなあ。
CSS property: interpolate-size | Can I use... Support tables for HTML5, CSS3, etc

まあ、まったく動きがないのですけども。
https://github.com/WebKit/standards-positions/issues/348

css
1        :root {
2            interpolate-size: allow-keywords;
3        }
4
5        .p-nav__middle {
6            transition: height 0.5s;
7            height: 0;
8            overflow: hidden;
9            /* display: none; */
10        }
11
12        .p-nav__middleItem a::before {
13            margin-right: 8px;
14            margin-left: 8px;
15            content: "-";
16        }
17
18
19        .p-nav__item.is-open .p-nav__middle {
20            height: auto;
21            /* display: block; */
22        }
23
24        @supports not (interpolate-size: allow-keywords) {
25            .p-nav__middle {
26                height: auto;
27                max-height: 0;
28                overflow: hidden;
29                transition: max-height 0.5s;
30            }
31
32            .p-nav__item.is-open .p-nav__middle {
33                max-height: 100vh;
34            }
35        }

投稿2025/04/03 08:39

Lhankor_Mhy

総合スコア37369

keel

2025/04/10 08:53

ありがとうございます。そんな便利なものがあるんですね... すごい滑らかに動きました。

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

たとえば、CSSにこんな感じで追加してみるとか

css
1.p-nav__item.is-open .p-nav__middle {
2  display:block;
3  animation:slidein 1s;
4  animation-fill-mode:forwards;
5  overflow:hidden;
6}
7@keyframes slidein{
8  from{height:0;}
9  to{height:128px;}
10}