Q&A
はじめまして。
あなたのCodePenを確認したんですが、レスポンシブ時にハンバーガーメニューがスクロール追従しない問題の原因は、ハンバーガーボタン（#navibtn）とメニュー全体が普通のドキュメントフローの中に配置されているだけだから、スクロールしても画面上部に固定されていないという点にあります。ご自身でposition: absoluteをいろいろ試されたとのことですが、これがうまくいかないのは、そもそも基準になる親要素がないとabsoluteはちゃんと動かないからなんですね。
実現したいこと
PC画面でメガメニューを使いたくて下記を参照しました。
https://www.rectus.co.jp/sample/responsive-navigation-only-css/mega2.html
メガメニューは出来たものの、レスポンシブ時のハンバーガーメニューが固定（追従）されません。
発生している問題・分からないこと
#navi #navibtnのposition: absolute;をいろいろ変えてみましたが、スクロールで追従してこなくて困っています。
該当のソースコード
https://codepen.io/MayMayMayMay/pen/gbLmwgy
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
CopilotやChatGPTに何度も聞きましたが、どんどんおかしくなっていくので、こちらでお尋ねする次第です。
どうぞよろしくお願いいたします！
補足
特になし
回答3件
0
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>レスポンシブメガメニュー</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome 6 (無料) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<input type="checkbox" id="menu-navibtn" />
<nav id="navi" role="navigation" aria-label="メインメニュー">
<div class="navi-inner">
<label id="navibtn" for="menu-navibtn">
<span>
<span>メニューを開く</span>
</span>
</label>
<div class="logo">LOGO</div>
<ul id="menu">
<li>
<a class="ib link" href="#">MENU01</a>
<input type="checkbox" id="menu-parent01"/>
<label for="menu-parent01">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>
<a href="#">Submenu01</a>
<input type="checkbox" id="menu-0101"/>
<label for="menu-0101">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li><a href="#submenu001">Submenu001</a></li>
<li><a href="#submenu002">Submenu002</a></li>
<li><a href="#submenu003">Submenu003</a></li>
</ul>
</li>
<li>
Submenu02
<input type="checkbox" id="menu-0102"/>
<label for="menu-0102">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0201</li>
<li>Submenu0202</li>
</ul>
</li>
<li>
Submenu03
<input type="checkbox" id="menu-0103"/>
<label for="menu-0103">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0301</li>
</ul>
</li>
<li>
Submenu04
<input type="checkbox" id="menu-0104"/>
<label for="menu-0104">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0401</li>
<li>Submenu0402</li>
<li>Submenu0403</li>
<li>Submenu0404</li>
</ul>
</li>
<li>
Submenu05
<input type="checkbox" id="menu-0105"/>
<label for="menu-0105">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0501</li>
<li>Submenu0502</li>
<li>Submenu0503</li>
<li>Submenu0504</li>
<li>Submenu0505</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="link">MENU02</a>
<input type="checkbox" id="menu-parent02"/>
<label for="menu-parent02">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul class="custody">
<li>Submenu01</li>
<li>Submenu02</li>
</ul>
</li>
<li>
<a class="ib link" href="#">MENU03</a>
<input type="checkbox" id="menu-parent03"/>
<label for="menu-parent03">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul class="preschool">
<li>Submenu01</li>
<li>Submenu02</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</body> </html><h1 id="bg">SAMPLE</h1> <main> <section id="submenu001" style="height: 500px;"> <h2>Submenu001</h2> <p>ここはSubmenu001のセクションです。アンカーリンクで移動するとここに飛びます。</p> </section> <section id="submenu002" style="height: 500px; background-color: #f0f0f0;"> <h2>Submenu002</h2> <p>ここはSubmenu002のセクションです。</p> </section> <section id="submenu003" style="height: 500px;"> <h2>Submenu003</h2> <p>ここはSubmenu003のセクションです。ハンバーガーメニューを開いてみてください。</p> </section> </main> <footer> <small>Copyright © <span id="current-year"></span> SAMPLE</small> </footer> <script src="script.js"></script>
投稿2026/05/20 06:14
総合スコア22
0
もしどうしても古いブラウザの対応が必要でstickyが使えないという場合は、JavaScriptで制御する方法もあります。ざっくり言うと、スクロールイベントを監視しておいて、スクロール位置がヘッダーのオフセットトップを超えたら、ヘッダーにfixed-navみたいなクラスを追加して、そのクラスにposition: fixedとtop: 0を指定してやればOKです。ただこの方法だと、ヘッダーが固定されたときに下のコンテンツが隠れちゃうので、ヘッダーの高さ分だけマージンを追加するのを忘れないでください。
でもまあ、パフォーマンスもいいし実装もラクなposition: stickyでの解決が間違いないと思います。ぜひ試してみてください。それでもうまくいかないときは、また教えてくださいね。
投稿2026/05/19 02:54
総合スコア22
0
ベストアンサー
で、一番簡単で確実な解決方法としては、position: stickyを使うことです。具体的には、CSSのheaderセレクタに「position: sticky; top: 0; z-index: 1000;」を追加してあげるだけで、ヘッダー全体がスクロールしたときに画面上端にピタッと貼り付くようになります。もっと限定したいなら、#naviセレクタの方に同じ設定を書いてもOKです。ここで大事なのは、stickyを使うときは必ずtopやbottomの値を指定しないと動かないということと、z-indexで他のコンテンツより前に出してあげないと、スクロールしたときにテキストがヘッダーの下から透けて見えちゃうので注意が必要です。
投稿2026/05/19 02:51
総合スコア22
早々にありがとうございます！
@media screen and (max-width: 1199px) 内のheader にposition: sticky; top: 0; z-index: 1000;を追記してもスクロールで追従しなかったので、#naviにも同じく追記しましたがダメでした…
codepenを更新しました。
https://codepen.io/MayMayMayMay/pen/gbLmwgy
rurumeさん、返信ありがとうございます。コードもわざわざ貼ってくれて助かります。
で、結論から言いますね。原因はhtmlとbodyのheight: 100%です。 あなたがstickyをどこに書こうが、これが残ってる限り動きません。なぜかというと、stickyは「親要素がスクロールできること」が前提なんですが、height: 100%を指定すると親の高さが画面サイズで固定されてしまい、スクロールの基準がおかしくなるからです。
直し方は超簡単。たったこれだけです。
/* こう書いてるのを */
html { height: 100%; }
body { height: 100%; }
/* こう直す */
html { /* height: 100%; 消すかコメントアウト */ }
body { min-height: 100%; }
たったこれだけで動きます。
なんでこれで動くの？
簡単に言うと、min-height: 100%は「最低でも画面の高さはあるけど、中身が増えたらその分だけ伸びるよ」という意味になります。これでbodyがちゃんとスクロールする親要素になるので、stickyが「画面の上端に貼り付け！」って理解できるようになるんです。
どうしてもheight: 100%を残したい人用の最終手段
どうしても変えたくないという場合は、stickyは諦めてfixedで強硬突破する手もあります。
@media screen and (max-width: 1199px) {
#navi {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 1000;
}
body {
padding-top: 80px; /* ヘッダーの高さ分、下のコンテンツをずらす */
}
}
この方法は絶対に動きます。ただ、padding-topの値は自分のヘッダーの高さに合わせて調整してくださいね。
まずは最初の方法（min-height）を試してみてください。 それが正しい直し方ですから。もしそれでもダメなら、遠慮なくfixedの方法を使ってください。
ありがとうございます！
html { /* height: 100%; 消すかコメントアウト */ }
body { min-height: 100%; }で直りました。
申し訳ないのですが…
ハンバーガーメニューのスクロール追従は出来て、めでたしめでたしと思ったのですが、ページ内アンカー先でくっついてきたハンバーガーメニューを開くと、最上部にすっ飛んで（というか固定のまま）見ていたアンカーエリアコンテンツから上にスクロールしないといけない状態です。
元々、「ハンバーガーメニューページ右上固定」という条件でご教示いただいた訳ですが、閲覧エリアでハンバーガーメニューを表示（閉じてる状態）することは可能でしょうか？
昨日のCodepenを更新して、困っている状況を見ていただけるようにしました。
https://codepen.io/MayMayMayMay/pen/gbLmwgy
お手数をおかけしますが、改めてよろしくお願いいたします。
こんにちは。
この原因は、CSSでメニューを開いたときに「#navi」全体に「position: fixed」を指定しているからです。
これだと、開いたメニューが現在のスクロール位置ではなくページのトップを基準に固定されてしまうので、アンカーで下に移動した後にメニューを開くと、必ず上に戻ってしまうという動きになります。
そこで、以下のような解決策を提案します。
① まず、「header」に「position: sticky; top: 0;」を指定して、ヘッダー自体がスクロール追従するようにします。
② その上で、ハンバーガーボタンの「#navibtn」はメディアクエリ内で「position: absolute; top: 20px; right: 20px;」のように指定します。
→ これで、追従するヘッダーの中でボタンだけ右上に固定されます。
③ メニューが開いたときは、「#menu-navibtn:checked ~ #navi」に以下の指定をします。
「position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; overflow-y: auto; z-index: 999;」
→ これで、全画面オーバーレイとして現在のスクロール位置上に表示されるようになります。
④ 最後に、メニューリスト自体は「#menu-navibtn:checked ~ * #menu」に「display: block; margin-top: 80px;」などを指定します。
→ ハンバーガーボタンの高さ分だけ上部に余白を入れて、ボタンの下にメニューが正しく並ぶようにします。
この状態なら、アンカーで移動した後にメニューを開いても、上に飛ぶことなく今見ている場所でメニューが開きます。
また、アンカークリック時にメニューを閉じるJavaScriptもそのまま動きますので、追加で何か変える必要はありません。
ぜひ試してみてください。
分からないことがあれば、また聞いてくださいね。
早々にありがとうございます。
すみません…うまくいってないです。。。
------------------------------------
① まず、「header」に「position: sticky; top: 0;」を指定して、ヘッダー自体がスクロール追従するようにします。
------------------------------------
PC画面ではheader固定したくないのですが、指定必須でしょうか？
------------------------------------
② その上で、ハンバーガーボタンの「#navibtn」はメディアクエリ内で「position: absolute; top: 20px; right: 20px;」のように指定します。
------------------------------------
これは昨日教えていただいた「#navi #navibtn {position: sticky; top: 0; float: right; z-index: 1000;}」
を削除して、差し替えるべきでしょうか。
（float: right はLOGOにfloat: left;を指定しているためです。今どきfloatなんて…とは思いますが、今のところ改修する余裕が無くて…）
Codopen 更新しました。どこかが間違っているのでしょうねm(__)m
https://codepen.io/MayMayMayMay/pen/gbLmwgy
ご返信ありがとうございます。そして、うまくいかなくて申し訳ありません。いただいた質問に一つずつお答えします。
① PC画面ではheader固定したくないのですが、指定必須でしょうか？
必須ではありません。「position: sticky」はメディアクエリ（スマホ表示時）の中だけで指定すれば大丈夫です。PC画面用の「header」には何も指定しない、または「position: static」（デフォルト）のままでOKです。
つまり、こういう書き方にしてください：
@media screen and (max-width: 1199px) {
header {
position: sticky;
top: 0;
z-index: 1000;
background: #FFF;
}
}
PC画面（1199px以上）ではstickyは効きません。
② ハンバーガーボタンの書き換えについて
はい、昨日教えていただいた「#navi #navibtn {position: sticky; top: 0; float: right; z-index: 1000;}」は削除して、以下のように差し替えるのが正しいです。
@media screen and (max-width: 1199px) {
#navi #navibtn {
display: block;
position: absolute; /* sticky → absolute に変更 */
top: 20px; /* 適宜調整 */
right: 20px; /* floatの代わりにrightで配置 */
z-index: 1000;
}
}
「float: right」を使わなくても、absolute＋rightで同じ右上配置ができます。LOGOのfloat: leftとは干渉しませんのでご安心ください。
③ その他の修正ポイント
Codepenが403エラーで直接確認できなかったので、よくある間違いをいくつか挙げます。
【よくある間違い1】メニューを開いたときの指定漏れ
#menu-navibtn:checked ~ #navi {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
overflow-y: auto;
z-index: 999;
}
この指定がないと、メニューを開いてもオーバーレイになりません。
【よくある間違い2】メニューリストの位置調整
#menu-navibtn:checked ~ * #menu {
display: block;
margin-top: 70px; /* ハンバーガーボタンの高さ分をあける */
}
これを入れないと、メニューがボタンの下に隠れてしまいます。
【よくある間違い3】absoluteの基準になる親要素
「#navibtn」をabsoluteにする場合、その親（#navi内のdivなど）に「position: relative」を指定しておくと安心です。
#navi > div {
position: relative;
}
まとめ：修正すべきCSS全体（メディアクエリ内）
@media screen and (max-width: 1199px) {
header {
position: sticky;
top: 0;
z-index: 1000;
background: #FFF;
}
#navi > div {
position: relative; /* absoluteの基準に */
}
#navi #navibtn {
display: block;
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
}
#menu-navibtn:checked ~ #navi {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
overflow-y: auto;
z-index: 999;
}
#menu-navibtn:checked ~ * #menu {
display: block;
margin-top: 70px;
}
}
もしこれでもうまくいかないようでしたら、Codepenの編集可能な状態のURLをいただけると、直接修正箇所をお見せできるかもしれません。あるいは、現在のCSS全体をテキストで貼っていただいても構いません。
お手数をおかけしますが、よろしくお願いします！
度々のご回答、本当にありがとうございます！
質問にもやさしくお答えくださり、大感謝です。
でもやはりアンカーSubmenu003に飛んだところでハンバーガーメニューはくっついてくるものの、クリックすると、最上部にとどまってしまいます。
メディアクエリ内をいただいた内容に更新しました。
編集可能画面は↓で大丈夫でしょうか…？
https://codepen.io/MayMayMayMay/pen/gbLmwgy/pen/
どうぞよろしくお願いいたします！
先日はハンバーガーメニューの件でいろいろと調整してしまい、すみませんでした。最終的に、以下の3つのファイルで完全に動作する状態になりましたので、ご連絡します。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>レスポンシブメガメニュー</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome 6 (無料) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<input type="checkbox" id="menu-navibtn" />
<nav id="navi" role="navigation" aria-label="メインメニュー">
<div class="navi-inner">
<label id="navibtn" for="menu-navibtn">
<span>
<span>メニューを開く</span>
</span>
</label>
<div class="logo">LOGO</div>
<ul id="menu">
<li>
<a class="ib link" href="#">MENU01</a>
<input type="checkbox" id="menu-parent01"/>
<label for="menu-parent01">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>
<a href="#">Submenu01</a>
<input type="checkbox" id="menu-0101"/>
<label for="menu-0101">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li><a href="#submenu001">Submenu001</a></li>
<li><a href="#submenu002">Submenu002</a></li>
<li><a href="#submenu003">Submenu003</a></li>
</ul>
</li>
<li>
Submenu02
<input type="checkbox" id="menu-0102"/>
<label for="menu-0102">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0201</li>
<li>Submenu0202</li>
</ul>
</li>
<li>
Submenu03
<input type="checkbox" id="menu-0103"/>
<label for="menu-0103">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0301</li>
</ul>
</li>
<li>
Submenu04
<input type="checkbox" id="menu-0104"/>
<label for="menu-0104">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0401</li>
<li>Submenu0402</li>
<li>Submenu0403</li>
<li>Submenu0404</li>
</ul>
</li>
<li>
Submenu05
<input type="checkbox" id="menu-0105"/>
<label for="menu-0105">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul>
<li>Submenu0501</li>
<li>Submenu0502</li>
<li>Submenu0503</li>
<li>Submenu0504</li>
<li>Submenu0505</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="link">MENU02</a>
<input type="checkbox" id="menu-parent02"/>
<label for="menu-parent02">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul class="custody">
<li>Submenu01</li>
<li>Submenu02</li>
</ul>
</li>
<li>
<a class="ib link" href="#">MENU03</a>
<input type="checkbox" id="menu-parent03"/>
<label for="menu-parent03">
<span class="pd"><i class="fas fa-chevron-down angletoggle"></i></span>
</label>
<ul class="preschool">
<li>Submenu01</li>
<li>Submenu02</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<h1 id="bg">SAMPLE</h1>
<main>
<section id="submenu001" style="height: 500px;">
<h2>Submenu001</h2>
<p>ここはSubmenu001のセクションです。アンカーリンクで移動するとここに飛びます。</p>
</section>
<section id="submenu002" style="height: 500px; background-color: #f0f0f0;">
<h2>Submenu002</h2>
<p>ここはSubmenu002のセクションです。</p>
</section>
<section id="submenu003" style="height: 500px;">
<h2>Submenu003</h2>
<p>ここはSubmenu003のセクションです。ハンバーガーメニューを開いてみてください。</p>
</section>
</main>
<footer>
<small>Copyright © <span id="current-year"></span> SAMPLE</small>
</footer>
<script src="script.js"></script>
</body>
</html>
@charset "utf-8";
/*==========================
基本設定
============================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body {
min-height: 100%;
position: relative;
font-size: 87.5%;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 400;
font-style: normal;
color: #262626;
background-color: #fff;
}
h1#bg {
background: linear-gradient(135deg, #f9f, #f0f0f0);
width: 100%;
min-height: 50vh;
color: #FFF;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
font-size: 200%;
text-align: center;
margin: 0 0 2em 0;
}
header {
width: 1200px;
height: 100px;
margin: 0 auto;
}
footer {
background: #282D5A;
text-align: center;
width: 100%;
color: #FFF;
padding: 10px 0;
margin-top: 50px;
}
#navi ul,
#menu ul {
list-style: none;
}
#navi {
background-color: #FFF;
padding: 1em;
box-sizing: border-box;
margin: 0 auto;
}
.logo {
float: left;
line-height: 60px;
font-size: 24px;
font-weight: bold;
color: #333;
}
main h2 {
background: #CCC;
padding: 0.5em;
margin-bottom: 1em;
}
main p {
padding: 0 1em;
line-height: 1.6;
}
/*==========================
メガメニュー
============================*/
/* チェックボックスを非表示 */
#navi input[type="checkbox"] {
display: none;
}
/* 上部メニュー */
#menu {
float: right;
margin-right: 10px;
}
#menu > li {
float: left;
margin: 0 15px;
line-height: 60px;
font-size: 17px;
font-weight: bold;
position: static;
}
/* パソコンでは V を非表示 */
#menu > li .pd {
display: none;
}
#menu-navibtn {
display: none;
}
/* 子メニュー */
#menu > li > ul li {
font-size: 14px;
}
/* ドロップダウンメニュー */
#menu > li > ul {
display: none;
position: absolute;
padding: 0px 20px;
background-color: #FFF;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
transition: 0.5s;
margin-left: inherit;
width: 100%;
left: 0;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul li {
display: inline-block;
padding: 0 14px;
vertical-align: top;
background-color: #EEE;
}
/* ハンバーガー（PCでは非表示） */
#navi #navibtn {
display: none;
}
main {
width: 1200px;
margin: 0 auto;
}
/*==========================
レスポンシブ（1199px以下）
============================*/
@media screen and (max-width: 1199px) {
header {
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
background: #FFF;
height: auto;
min-height: 70px;
}
main {
width: 95%;
margin: 0 auto;
}
#navi {
width: 100%;
padding: 0.5em 1em;
}
.navi-inner {
position: relative;
min-height: 60px;
}
.logo {
float: none;
display: inline-block;
line-height: 60px;
}
/* 基本非表示 */
#menu {
display: none;
float: none;
margin-right: 0;
padding: 0;
}
#menu li {
position: relative;
height: auto;
width: 100%;
padding: 0px 20px;
border-bottom: 1px solid #DDD;
white-space: nowrap;
}
#menu > li {
margin-right: 0;
float: none;
}
/* V を表示 */
#menu > li .pd {
display: inline-block;
width: 100%;
text-align: right;
}
#menu li a {
display: inline-block;
}
#menu li:first-child {
border-top: 1px solid #DDD;
}
#menu li i {
padding: 0px 6px;
}
/* メニューを開いたときのオーバーレイ */
#menu-navibtn:checked ~ #navi {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background: #FFF;
overflow-y: auto;
z-index: 999;
padding: 1em;
}
/* ハンバーガーメニューがクリックされた時 */
#menu-navibtn:checked ~ * #menu {
display: block;
margin-top: 50px;
}
#menu-navibtn:checked ~ * #menu > li {
max-height: inherit;
overflow-y: visible;
}
#menu > li ul {
line-height: 50px;
}
#menu > li > ul {
padding: 0;
position: static;
}
/* アコーディオン部分初期状態 */
#menu li ul li {
display: none;
}
#menu > li > label:hover {
cursor: pointer;
}
#menu li ul {
position: static;
display: inline;
width: 100%;
}
/* 子メニュー */
#menu > li > ul {
margin-left: initial;
}
#menu ul li:last-child {
border-bottom: none;
}
#menu > li > ul li {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
display: block;
padding: 0;
}
#menu li ul li ul {
top: inherit;
left: 0;
padding-left: 20px;
}
/* 子メニューがクリックされた時 */
#menu input[type="checkbox"]:checked ~ label ~ ul > li {
max-height: inherit;
overflow-y: visible;
display: block;
}
.angletoggle:before {
content: "▼";
font-style: normal;
font-family: "Font Awesome 6 Free";
}
/* ======================================== */
/* ハンバーガーボタン（1行表示・確実に動作） */
/* ======================================== */
#navi #navibtn {
display: block;
position: absolute;
top: 10px;
right: 10px;
z-index: 1001;
cursor: pointer;
}
/* ボタンの外枠（40px×40px） */
#navibtn > span {
display: block;
width: 40px;
height: 40px;
background-color: #333;
border-radius: 4px;
position: relative;
}
/* テキスト「メニューを開く」を完全に非表示（確実に1行に） */
#navibtn span span {
display: none !important;
}
/* ハンバーガーアイコンの3本線 */
/* 上の棒 + 中の棒（box-shadowで表現） */
#navibtn > span::before {
position: absolute;
left: 10px;
top: 10px;
content: "";
width: 20px;
height: 3px;
background-color: #FFF;
box-shadow: 0 8px 0 #FFF; /* 中の棒 */
transition: 0.3s;
}
/* 下の棒 */
#navibtn > span::after {
position: absolute;
left: 10px;
bottom: 10px;
content: "";
width: 20px;
height: 3px;
background-color: #FFF;
transition: 0.3s;
}
/* 閉じるボタン（×マーク） */
#menu-navibtn:checked ~ #navi label#navibtn > span::before {
top: 18px;
transform: rotate(-45deg);
box-shadow: none; /* 中の棒を消す */
}
#menu-navibtn:checked ~ #navi label#navibtn > span::after {
bottom: 18px;
transform: rotate(45deg);
}
}
/*==========================
タブレット向け微調整
============================*/
@media screen and (max-width: 768px) {
#menu li {
white-space: normal;
}
#menu li a {
word-break: break-word;
}
}
/**
* レスポンシブメガメニュー
* アンカーリンククリック時にハンバーガーメニューを自動で閉じる
*/
document.addEventListener('DOMContentLoaded', function() {
// 1. アンカーリンククリック時にメニューを閉じる
const menuLinks = document.querySelectorAll('#menu a');
const menuToggle = document.getElementById('menu-navibtn');
menuLinks.forEach(function(link) {
const href = link.getAttribute('href') || '';
// #を含むリンク（ページ内リンク）だけを対象にする
if (href.includes('#')) {
link.addEventListener('click', function() {
if (menuToggle) {
menuToggle.checked = false; // メニューを閉じる
}
});
}
});
// 2. メニュー内の背景クリックで閉じないようにする（オプション）
// 必要に応じて、メニュー外をクリックしたら閉じる機能を追加可能
// 3. 現在の年数をフッターに表示
const yearSpan = document.getElementById('current-year');
if (yearSpan) {
const startYear = 2021;
const currentYear = new Date().getFullYear();
yearSpan.textContent = currentYear > startYear ? startYear + '-' + currentYear : startYear;
}
// 4. スクロール時のアクティブメニュー表示（オプション）
// 必要に応じて実装可能
// 5. コンソールログ（デバッグ用）
console.log('ハンバーガーメニューのJSが正常に動作しています');
});
度々の迅速なご対応をありがとうございます！
もう脳みそがダウンしてきたので、明朝クリアな状態でいただいたコードを試させていただいた上でまたコメントします。
本当に何度も申し訳ないです…(><);
大丈夫です。テスト結果をお見せしたいのですが、どのようにお送りすればよろしいでしょうか？
私のChatwork ID：konepki31
ご連絡いただければ幸いです。
昨日はありがとうございました。
いただいたコードで画面を作りまして、確かにアンカーリンクへ飛んだ時に閉じた状態のハンバーガーメニューがくっついているようになりました。
が…ハンバーガーメニューを開いた際に、MENU01内がすべて展開されてしまって閉じることも出来ないです。（表示位置に関わらず）
メニュー内のスクロールも出来ないので、MENU02・MENU03が見られない状況です。
Chatwork でID検索しましたが、出てこないので、下記へアクセスしていただけますか。
https://www.chatwork.com/MayMayMayMay
よろしくお願いします！
おはようございます。
メッセージをお送りしました。
Chatworkをご確認ください。
CSSの部分だけをコピー＆ペーストして置き換えてください。その後、結果を確認し、質問があればお知らせください。
多大なるご協力をありがとうございました！
ご不明な点がございましたら、お気軽に問い合わせてください。
あなたの回答
tips
プレビュー
