CSS:ハンバーガーメニュー、リンククリックしたら閉じたい

Question

前提・実現したいこと

<実現したいこと>
CSS:ハンバーガーメニュー、リンククリックしたら閉じたい

<前提>
ハンバーガーメニューのリンクをクリックしても、
ページ自体の遷移はしているが、メニュバーは開いたまま

ハンバーガーメニューは、html,cssのみで制作
jQueryでも対応可能

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

閉じるボタンを押さないとメニューが閉じない

該当のソースコード

    <header id="hdr">
      <input id="navToggle" type="checkbox" name="toggler">
      <label for="navToggle" class="navBtn"><span></span><span></span><span></span></label>
     
    <div class="gnav">
        <nav class="gnavCont">
          <ul class="primary-menu">
            <li><a href="#section1">Home</a></li>
            <li><a href="#section2">About</a></li>
            <li><a href="#section3">Company</a></li>
            <li><a href="#section4">Contact</a></li>
          </ul>
        </div>
    </div>
    </header>

header#hdr {
  overflow: visible;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 990;
  margin: 0;
  pointer-events: none;
}

header#hdr .navBtn {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  position: relative;
  width: 30px;
  height: 22px;
  pointer-events: auto;
}
header#hdr .navBtn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333333;
}
header#hdr .navBtn span:nth-of-type(1) {
  top: 0;
}
header#hdr .navBtn span:nth-of-type(2) {
  top: 10px;
}
header#hdr .navBtn span:nth-of-type(3) {
  bottom: 0;
}
header#hdr #navToggle:checked ~ .navBtn span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
header#hdr #navToggle:checked ~ .navBtn span:nth-of-type(2) {
  opacity: 0;
}
header#hdr #navToggle:checked ~ .navBtn span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}

header#hdr .gnav {
  display: none;
  background: rgba(0,0,0,0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
@media (max-width: 767px) {
  header#hdr .gnav {
    background: rgba(0,0,0,0.8);
  }

}
header#hdr #navToggle:checked ~ .headerCont .lCont .hLogo .hLogoG {
  display: block;
}
header#hdr #navToggle:checked ~ .headerCont .lCont .hLogo .hLogoB {
  display: none;
}
header#hdr #navToggle:checked ~ .navBtn span {
  background-color: #fff;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .headerCont .rCont .hNav {
    position: fixed;
    bottom: 4%;
    left: 0%;
  }
}
header#hdr #navToggle:checked ~ .headerCont .rCont .hNav .nav01 {
  display: none;
}
header#hdr #navToggle:checked ~ .headerCont .rCont .hNav .nav02 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}
header#hdr #navToggle:checked ~ .gnav {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}
header#hdr #navToggle:checked ~ .gnav .gnavCont {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0% 0 11.4%;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont {
    flex-direction: column;
    height: 70vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul li {
  float: none;
  margin: 0 0 10px 0;
  text-align: left;
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul li a {
  font-size: 1.1rem;
  transition: .4s;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul li a {
    font-size: 1.6rem;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul li a:hover {
  opacity: .6;
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul li{
  padding-left: 30px;
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul li > div {
  margin-bottom: 10px;
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(1) {
  width: 25.5%;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(1) {
    margin-bottom: 30px;
    width: 100%;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(1) li a {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 2.0rem;
  font-weight: bold;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(1) li a {
    font-size: 2.0rem;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(2) {
  width: 25.6%;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(2) {
    margin-bottom: 0px;
    width: 100%;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(3) {
  width: 25.5%;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(3) {
    margin-bottom: 30px;
    width: 100%;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(4) {
  width: 22%;
}
@media (max-width: 767px) {
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul:nth-child(4) {
    margin-bottom: 30px;
    width: 100%;
  }
}
header#hdr #navToggle:checked ~ .gnav .gnavCont ul li a {
  color: #cccccc;
  text-decoration: none;
}


  /*subscstore original css*/
  header#hdr #navToggle:checked ~ .gnav .gnavCont ul li a {
    font-size: 2rem;
    transition: .4s;
  }
  body div[data-reactroot] > div > .border-bottom {
    background-color: transparent !important;
    border-bottom: none !important;
  }
  .navBtn{
    cursor:pointer;
  }
  header#hdr ul {
    padding-left: 0;
    margin-bottom: 0;
  }
  header#hdr li {
    list-style:none;
  }
  header#hdr h1,header#hdr h2,header#hdr h3,header#hdr h4,header#hdr h5,header#hdr h6{
    margin-top:0;
    margin-bottom:0;
  }
  header#hdr #navToggle{
    display: none;
  }
  header#hdr .navBtn{
    position: fixed;
    top: 80px;
    left: 80px;
    z-index: 999;
  }
  @media (max-width: 767px) {
    header#hdr .navBtn{
      position: fixed;
      top: 0;
      left: 0;
      margin: 4%;
      z-index: 999;
    }
  }

試したこと

似たような質問がたくさんあったので、jQueryでの対応を試してみたり、と
やってみましたが、リンククリック⇨メニュー閉じるは実現できませんでした...

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

gnavContクラスのaタグがクリックされたらnavToggleのチェックを外す。

$('.gnavCont a').click(function(){
  $('#navToggle').prop('checked', false);
})

Comments

[rrgsn]

test.jsに回答いただいた
$('.gnavCont a').click(function(){
$('#navToggle').prop('checked', false);
});
を追記したのですが、解決できませんでした....

[soliste16]

jsが読み込まれていないかjQueryが読み込まれていないかぐらいでしょう。
動作確認用:https://codepen.io/soliste16/pen/yLYoRKJ

[soliste16]

それでもだめでしたら、</body>の手前でjsを読み込むか、このjsをready関数で囲むかしてください。
$(function(){
$('.gnavCont a').click(function(){
$('#navToggle').prop('checked', false);
})
});

[rrgsn]

ご回答いただいたもの全て試しましたが、ダメでした....
念の為動作確認のものを丸々コピーし直したのですが、それも動作せず。

もしかしたらheadでの記載が誤っているのか..みていただけますか？
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>K-3.</title>
<link rel=stylesheet type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet">

<script src="/~/js/easings.min.js"></script>
<script src="/~/js/fullpage.js"></script>
<script src="/~/js/scrolloverflow.min.js"></script>
<script type="text/javascript" src="/~/js/test.js"></script>
</head>

読み込みに関しては
<script>
$(function(){ // if document is ready
alert('jQuery is ready.')
});
</script>
こちらでできていると確認済みです。

[rrgsn]

fullpage.jsという慣れないものを利用しているので、
そちらも影響を受けているかもしれないです...

$(document).ready(function(){

$(function(){
$('.gnavCont a').click(function(){
$('#navToggle').prop('checked', false);
})
});

});
// スムーススクロール
const paginations = document.querySelectorAll(".pagination a");
paginations.forEach(pagination => {
pagination.addEventListener("click", e => {
e.preventDefault();
const targetId = e.target.hash;
const target = document.querySelector(targetId);
target.scrollIntoView({ behavior: "smooth" });
});
});

// Intersection Observer
const sections = document.querySelectorAll(".section");
const observerRoot = document.querySelector(".fullPageScroll");
const options = {
root: observerRoot,
rootMargin: "-50% 0px",
threshold: 0
};

/**
* 交差したときに呼び出す関数
* @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。
*/
function doWhenIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
activatePagination(entry.target);
}
});
};

/**
* ページネーションの大きさを変える関数
* @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。
*/
function activatePagination(element) {
const currentActiveIndex = document.querySelector(
"#pagination .active"
);
if (currentActiveIndex !== null) {
currentActiveIndex.classList.remove("active");
}
const newActiveIndex = document.querySelector(
`a[href='#${element.id}']`
);
newActiveIndex.classList.add("active");
};

$(window).on('load', function() {
var observer = new IntersectionObserver(function(entries, observer) {
if (entries[0].intersectionRatio > 0) {
observer.unobserve(entries[0].target);
$(entries[0].target).addClass('active');
}
});

$('.scroll-animation').each(function(index, element) {
observer.observe(element);
});
});

Array.prototype.forEach.call(image, function(img) {
observer.observe(img);
});
});

[soliste16]

$('.scroll-animation').each(function(index, element) {
observer.observe(element);
});
}); ←一つ多いです

ぱっと見これぐらいですけど、どうでしょうか。
これは見間違いですね・・・。

[soliste16]

Array.prototype.forEach.call(image, function(img) {
observer.observe(img);
});
});←一つ多いです

こっちですかね。

[rrgsn]

試みましたが、改善できませんでした.....

[soliste16]

head内でjQueryを読み込まずどこで読み込んでいるのか良く分からないのですが、少なくとも、提示されたコードで先ほど指摘した部分を修正したところ、こちらの方では動作確認ができましたので原因の断定は難しいです。エラー表示が出ていないか、JSを上記のものだけにする等のデバッグ作業を行ってもらうしかないと思います。

[rrgsn]

動作確認用:https://codepen.io/soliste16/pen/yLYoRKJ
上記のサイトで、全く同じコードをうめこんだら、正常に作動しました......

完全に迷子です。Atomでうまく反映されていないだけでしょうか.....

[soliste16]

少なくともエディタの問題ではないと思います。全く同じコードといっても、オフラインで読み込んでいるJSをすべてCDN読み込みにして試されたということでしょうか。

・問題のjQueryの記述以外のJS部分は問題なく動く
・エラーが出ていない

ということであれば、HTMLもすべてご提示頂かないと確実なことは言えません。もし全てのHTMLを頂いた上で、当方で問題なく動くようであれば完全に質問者さんの環境の問題ですのでお手上げです。

[rrgsn]

色々触っていたら再現できなかったので、
もしかしたらただの間違いかもしれないです...もしわけございません...
実は特定のセクションにきたらアニメーションが作動する。というものを
jQueryで行なっていたのですが、そちらもうまく作動していないので、
jqueryの読み込みがちゃんとできていない可能性もあります....

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>K-3.</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet">
<link rel=stylesheet type="text/css" href="style.css">
<script src="/Users/xxxx/Desktop/KK/js/fullpage.js"></script>
<script src="/Users/xxxx/Desktop/KK/js/jquery-3.5.0.js"></script>
<script src="/Users/xxxx/Desktop/KK/js/test.js"></script>
</head>
<!--header-->

<header id="hdr">
<input id="navToggle" type="checkbox" name="toggler">
<label for="navToggle" class="navBtn"><span></span><span></span><span></span></label>
<!--<img class="logo" src="/Users/xxxx/Desktop/KK/images/logo.png">-->
<div class="gnav">
<nav class="gnavCont">
<ul class="primary-menu">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section3">Company</a></li>
<li><a href="#section4">Contact</a></li>
</ul>
</div>
</div>
</header>

<!--header_end-->

<body>
<div class="wrapper">
<div class="fullPageScroll">
<section id="section1" class="section section1">
<h1>xxxxxxxxx</h1>
<h2>xxxxxxxxxx</h2>
<p class="sample-text1">xxxxxxxxxxxxxxxx</p>
</section>

<section id="section2" class="section section2">
<h1>About</h1>
<h2>xxxxxxxxx</h2>
<div class="img-wrap">
<img src="/Users/xxxx/Desktop/KK/images/xxx.jpg">
</div>
</section>
<section id="section3" class="section section3">
<h1>Company Profile</h1>
<div class="img-wrap">
<img src="/Users/xxxx/Desktop/KK/images/header_image.jpg">
</div>
<div class="about-profile-wrap">
<ul class="profile-lists">
<li class="profile-list">
<h4><span style="font-family: 'Noto Serif JP', serif;">会社名</span><span style="font-family: 'Raleway', sans-serif;"> / Company name</span></h4>
<a>株式会社K-3.</a>
</li>
<li class="profile-list">
<h4><span style="font-family: 'Noto Serif JP', serif;">代表者</span><span style="font-family: 'Raleway', sans-serif;"> / Founder</span></h4>
<a>xxxx</a>
</li>
<li class="profile-list">
<h4><span style="font-family: 'Noto Serif JP', serif;">設立日</span><span style="font-family: 'Raleway', sans-serif;"> / Date of establishment</span></h4>
<a>2020/04/30</a>
</li>
<li class="profile-list">
<h4><span style="font-family: 'Noto Serif JP', serif;">事業内容</span><span style="font-family: 'Raleway', sans-serif;"> / Business line up</span></h4>
<a>xxxxxx事業</a>
</li>
</ul>
</div>
</section>

<section id="section4" class="section section4">
<h1>Contact</h1>

<!-- xxxxxxxxxxxx

CONTACT PAGE

xxxxxxxxxxxxxxxxx -->

<section id="contact">
<div class="contact-wrapper">
<!--xxxxxxxxxxxxxx

CONTACT PAGE LEFT

xxxxxxxxxxxxxxxxxx-->
<form class="form-horizontal" role="form" method="post" action="contact.php">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" id="name" rows="2" cols="30" placeholder="Name" name="name" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" rows="2" cols="30" placeholder="Email" name="email" value="">
</div>
</div>
<textarea class="form-control" id="textarea" rows="2" cols="30" placeholder="Message" name="message"></textarea>
<button class="btn btn-primary send-button" id="submit" type="submit" value="SEND">
<div class="button">
<i class="fa fa-paper-plane"></i><span class="send-text">Send</span>
</div>
</button>
</form>

<!--xxxxxxxxxxxxxx

CONTACT PAGE RIGHT

xxxxxxxxxxxxxxxxxx-->

<div class="direct-contact-container">
<ul class="contact-list">
<li class="list-item"><i class="fa fa-map-marker fa-2x"><span class="contact-text place">Aichi pre. / JP</span></i></li>
<li class="list-item"><i class="fa fa-phone fa-2x"><span class="contact-text phone"><a href="tel:[phone]" title="Give me a call">[phone]</a></span></i></li>
<li class="list-item"><i class="fa fa-envelope fa-2x"><span class="contact-text gmail"><a href="mailto:#" title="Send me an email">[e-mail]</a></span></i></li>
</ul>

<ul class="social-media-list">
<li><a href="#" target="_blank" class="contact-icon">
<i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li><a href="#" target="_blank" class="contact-icon">
<i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li><a href="#" target="_blank" class="contact-icon">
<i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</section>
</section>
</div>
</div>
<nav id="pagination" class="pagination">
<a id="pagination1" href="#section1"></a>
<a id="pagination2" href="#section2"></a>
<a id="pagination3" href="#section3"></a>
<a id="pagination4" href="#section4"></a>
</nav>

</body>
</html>

[soliste16]

やはり当方では上手く機能します。後はhtml内にscriptタグでJSを埋め込んでみるとかでしょうか。
そもそも下記は動いたんですよね。

<script>
$(function(){ // if document is ready
alert('jQuery is ready.')
});
</script>

また、fullpage.jsはjQueryの前に読み込まないと動作しないと思いますよ。

[rrgsn]

$(function(){ // if document is ready
alert('jQuery is ready.')
});

でjQuery is readyのポップアップが表示されます。

後はhtml内にscriptタグでJSを埋め込んでみるとかでしょうか。
⇨これでメニューバーの件解決しました！！！！本当にありがとうございます！！

しかし、なぜjs上の表記ではだめだったのでしょうか......

[soliste16]

そもそも外部JS(test.js)が読み込まれていないとしか考えられません。ただ、読み込みタグを見るとその他のJSと同じ階層にあるようですから、他のJSが読み込まれているのであれば、ファイル名が違う以外の理由は分かりかねます。パスが正しいか、ファイル名が正しいか、ファイルの読み込み順があっているか等を今一度確かめてみるしかないと思います。

>また、fullpage.jsはjQueryの前に読み込まないと動作しないと思いますよ。
と書きましたけど書き間違えてますね。jQueryの後に読み込んでください。

[rrgsn]

なるほど.....
他のjsが読み込まれないように他の階層に入れるべきですかね。

ファイルの順番など考えてもみなかったですが、承知しました！
色々と調べたら結構関係するようですね.....

本当に色々と長い間ありがとうございました!!!!!!!!!!