ここから本文です

ハンバーガーメニューが、サイト内リンクをクリックした際に、閉じません。 CSSで...

アバター

ID非公開さん

2019/4/2316:14:59

ハンバーガーメニューが、サイト内リンクをクリックした際に、閉じません。
CSSでの方法を教えてください。

閲覧数:
74
回答数:
3
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ybb********さん

2019/4/2322:34:09

ID非公開さん

>・・・・・ハンバーガーメニュー・・・・・・・・・・・・・

ご参考に↓
https://www.expexp.jp/css-js-hamburger-nav/

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

2019/4/2419:32:37

CSSよりjsの方が早いです。

<button type="button" class="toggle">
<span class="hamburger"></span>
</button>

<nav class="menu">
<ul">
<li><a href="#link01">リンク1</a></li>
<li><a href="#link02">リンク2</a></li>
<li><a href="#link03">リンク3</a></li>
</ul>
</nav>

$('menu li a').on('click', function(){
if (window.innerWidth <= 600) {
$('.toggle').click();
}
});

ssr********さん

2019/4/2418:29:04

ページが切り替わるのであればハンバーガーメニューも起動しますが、同一ページ内でのリンク、つまり#から始まるパスを記述していた場合、ページが切り替わらないため画面が差し変わらず、結果としてハンバーガーメニューが閉じないと言う話になってきます。
これを解決するためには、Javascriptによるハンバーガーメニューの制御が必要となるでしょう。
チェックボックスを用いたハンバーガーメニューをご利用であるなら、ページ内リンクをクリックした際にそのチェックボックスを操作するよう記述しておくことにより、ページ内リンクをクリックすると閉じるようにできます。

ハンバーガーメニューが消えない例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body, input, label, ul, li, a, h2, p {
margin: 0;
padding: 0;
list-style: none;
}
input[type="checkbox"] {
display: none;
}
label[for="box"] {
display: block;
width: 24px;
height: 24px;
line-height: 24px;
margin: 13px;
font-size: 20px;
background: #ddd;
border-radius: 5px;
position: fixed;
top: 10px;
left: 10px;
z-index: 999;
}
label[for="box"] + ul {
width: 100vw;
height: 100vh;
background: rgba(255,255,255,0.7);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 998;
transform: translateX(-100vw);
transition: 1s ease-in-out;
}
input[type="checkbox"]:checked ~ ul {
transform: translateX(0);
}
label[for="box"] + ul li {
width: 100%;
height: 50px;
text-align: center;
border-bottom: 1px solid silver;
}
label[for="box"] + ul li:first-child {
margin-top: 50px;
}
label[for="box"] + ul li a {
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
text-decoration: none;
}
div:nth-child(2) {
margin-top: 50px;
background: #dfd;
}
section:nth-child(3n+1) p {
background: #fdd;
}
section:nth-child(3n+2) p {
background: #fdf;
}
section:nth-child(3n+0) p {
background: #ddf;
}
h2 {
font-size: 30px;
line-height: 60px;
text-align: center;
}
p {
width: 80%;
height: 250px;
margin: 0 auto;
text-align: center;

}
</style>
</head>
<body>
<div>
<input type="checkbox" id="box" />
<label for="box">×</label>
<ul>
<li><a href="#link1">ページ内リンク1</a></li>
<li><a href="#link2">ページ内リンク2</a></li>
<li><a href="#link3">ページ内リンク3</a></li>
<li><a href="#link4">ページ内リンク4</a></li>
<li><a href="#link5">ページ内リンク5</a></li>
<li><a href="#link6">ページ内リンク6</a></li>
</ul>
</div>
<div>
<section>
<h2 id="link1">ページ内リンク1</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link2">ページ内リンク2</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link3">ページ内リンク3</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link4">ページ内リンク4</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link5">ページ内リンク5</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
<section>
<h2 id="link6">ページ内リンク6</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
</div>
</body>
</html>

ハンバーガーメニューが消える例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body, input, label, ul, li, a, h2, p {
margin: 0;
padding: 0;
list-style: none;
}
input[type="checkbox"] {
display: none;
}
label[for="box"] {
display: block;
width: 24px;
height: 24px;
line-height: 24px;
margin: 13px;
font-size: 20px;
background: #ddd;
border-radius: 5px;
position: fixed;
top: 10px;
left: 10px;
z-index: 999;
}
label[for="box"] + ul {
width: 100vw;
height: 100vh;
background: rgba(255,255,255,0.7);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 998;
transform: translateX(-100vw);
transition: 1s ease-in-out;
}
input[type="checkbox"]:checked ~ ul {
transform: translateX(0);
}
label[for="box"] + ul li {
width: 100%;
height: 50px;
text-align: center;
border-bottom: 1px solid silver;
}
label[for="box"] + ul li:first-child {
margin-top: 50px;
}
label[for="box"] + ul li a {
display: inline-block;
width: 100%;
height: 50px;
line-height: 50px;
text-decoration: none;
}
div:nth-child(2) {
margin-top: 50px;
background: #dfd;
}
section:nth-child(3n+1) p {
background: #fdd;
}
section:nth-child(3n+2) p {
background: #fdf;
}
section:nth-child(3n+0) p {
background: #ddf;
}
h2 {
font-size: 30px;
line-height: 60px;
text-align: center;
}
p {
width: 80%;
height: 250px;
margin: 0 auto;
text-align: center;

}
</style>
</head>
<body>
<div>
<input type="checkbox" id="box" />
<label for="box">×</label>
<ul>
<li><a href="#link1">ページ内リンク1</a></li>
<li><a href="#link2">ページ内リンク2</a></li>
<li><a href="#link3">ページ内リンク3</a></li>
<li><a href="#link4">ページ内リンク4</a></li>
<li><a href="#link5">ページ内リンク5</a></li>
<li><a href="#link6">ページ内リンク6</a></li>
</ul>
</div>
<div>
<section>
<h2 id="link1">ページ内リンク1</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link2">ページ内リンク2</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link3">ページ内リンク3</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link4">ページ内リンク4</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
<section>
<h2 id="link5">ページ内リンク5</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
<section>
<h2 id="link6">ページ内リンク6</h2>
<p>テキスト<br />サンプルテキスト<br />テキストのサンプル</p>
</section>
</div>
<script><!-- 追加した項目 -->
const check = document.getElementById("box");
const hamburger = document.querySelectorAll("ul > li > a");
for (i = 0; i < hamburger.length; i++) {
hamburger[i].addEventListener('click', function(){
check.checked = false;
}, false);
};
</script>
</body>
</html>

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる