ハンバーガーメニューページ内リンク飛ばない時の解消
JavaScriptを使って作成したハンバーガーメニューで、
リンクをクリックした時に、ハンバーガーのウインドウが
消えない状態の解消方法を書いていきます。
ハンバーガーメニューから、リンクをクリックしたとき、
別のサイトへのリンクの場合は、いい感じでリンク先が
表示されるので、JavaScriptは動作してるのは確認。
でも、IDを使って、同じページ内リンクの場合は、
ページが、表示されない。
よく調べてみると、リロードかけるとリンク先が
表示されるので、リンクは出来てるが、ハンバーガー
のウインドウが消えてないのが原因とわかった。
では、このウインドウを消すにはどうすればいいのか、
色々探してみたが、よくわからない。
今回検索してわかったのは、JavaScriptの書き方
はほんとに、たくさんあるのがわかった。
調べたキーワード
ハンバーガーメニューページ内リンク時メニューが閉じない
で探せばよかった感じです。
toggleClass
実際この方法で探しても、見つからないので、
出てきたコードを片っ端から内容変更して調べました。
結果、何とか思った動作が出来るようになったので、
記事に残しておきます。
サンプルコードも書いときますので、参考にしてください。
完成したハンバーガーメニューはこちらになります。
CodePen
結論、最終的にJavaScriptに、２行のコードを追加で完了でした。
追加したコードはこちらになります。
$(‘a[href^=”#”]’).on(‘click’, function() {
$(‘.burger-btn’).click();
})
今回参考にしたコードはPENGIN LLC.さんのページより
今回、使用したコードはPENGIN LLC.さんの
下記のページのコードを元に作成させていただきました。
【コピペOK】ハンバーガーメニューの作り方（js学習ステップ第四弾）
ページ内リンクのない、外部リンクだけなら、こちらのコードで
綺麗に動作しました。
PENGIN LLC.さんのブログはよく参考にさせてもらってます。
サンプルコード
HTML
<header class="header">
<h1 class="site-title">
<a href="./">いのぷろ</a>
</h1><!-- ①サイトタイトル -->
<div class="nav-wrapper">
<!-- ②ナビゲーションメニュー -->
<nav class="header-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#about">About</a>
</li>
<li class="nav-item">
<a href="https://inopro.jpn.org/482/">プログラミング</a>
</li>
<li class="nav-item">
<a href="#about3">Access</a>
</li>
</ul>
</nav>
</div>
<button class="burger-btn">
<!-- ③ハンバーガーボタン -->
<span class="bar bar_top"></span>
<span class="bar bar_mid"></span>
<span class="bar bar_bottom"></span>
</button>
</header>
CSS
/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html {
background: #fff;
color: #000;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body , div , dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , code , form , fieldset , legend , input , textarea , p , blockquote , th , td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset , img {
border: 0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address , caption , cite , code , dfn , em , strong , th , var {
font-style: normal;
font-weight: normal;
}
ol , ul {
list-style: none;
}
caption , th {
text-align: left;
}
h1 , h2 , h3 , h4 , h5 , h6 {
font-size: 100%;
font-weight: normal;
}
q:before , q:after {
content: "";
}
abbr , acronym {
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input , textarea , select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*to enable resizing for IE*/
input , textarea , select {
font-size: 100%;
}
/*because legend doesn't inherit in IE */
legend {
color: #000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset {
display: none;
}
/* style.css */
/* -------------------- */
/* base
/* -------------------- */
body {
font-family: "Roboto", "Noto Sans JP", sans-serif;
}
li {
list-style: none;
}
a {
color: #fff;
text-decoration: none;
}
img {
vertical-align: bottom;
width: 100%;
}
/* -------------------- */
/* header
/* -------------------- */
.header {
align-items: center;
background-color: #1b1310;
border-bottom: 1px solid #fff;
color: #fff;
display: flex;
height: 74px;
justify-content: space-between;
padding: 0 120px;
}
.nav-list {
/* navの横並び */
display: flex;
}
.nav-item {
/* メニューの右側に余白 */
margin-right: 55px;
}
.burger-btn {
display: none;
}
@media screen and (max-width:768px) {
/* ----------------------- */
/* base_sp
/* ----------------------- */
/* デフォルトのbuttonスタイルをリセット */
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 0;
border-radius: 0;
color: inherit;
cursor: pointer;
font: inherit;
margin: 0;
outline: none;
padding: 0;
vertical-align: middle;
}
/* ------------------ */
/* humberger-menu */
/* ------------------ */
.header {
padding: 0 5%;
}
/* 以下、ハンバーガーボタン */
.burger-btn {
display: block;
height: 39px;
position: relative;
width: 39px;
z-index: 3;
/* codepenの挙動のため */
background-color: transparent;
border: none;
}
.bar {
background-color: #fff;
display: block;
height: 1px;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 20px;
}
.bar_top {
top: 10px;
}
.bar_mid {
top: 50%;
transform: translate(-50%,-50%);
}
.bar_bottom {
bottom: 10px;
}
.burger-btn.close .bar_top {
transform: translate(-50%,10px) rotate(45deg);
transition: transform .3s;
}
.burger-btn.close .bar_mid {
opacity: 0;
transition: opacity .3s;
}
.burger-btn.close .bar_bottom {
transform: translate(-50%,-8px) rotate(-45deg);
transition: transform .3s;
}
/* スクロール制御 */
.noscroll{
overflow: hidden;
}
/* 以下、ハンバーガーメニュー */
.nav-wrapper {
visibility: hidden;
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100vw;
opacity: 0;
transition: opacity .5s;
z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
}
.header-nav {
background-color: #1b1310;
height: 100%;
width: 100%;
z-index: 2;
}
.nav-list {
display: block;
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%,-50%);
}
.nav-item {
margin-bottom: 40px;
margin-right: 0;
}
/* メニューオープン時 */
.nav-wrapper.fade {
opacity: 1;
visibility: visible;
}
/* ------------------ */
/* fv */
/* ------------------ */
.main-copy {
font-size: 30px;
}
/* ------------------ */
/* about */
/* ------------------ */
h3 {
font-size: 20px;
margin-bottom: 30px;
}
.section-wrapper {
padding: 100px 5% 50px;
}
}
JavaScript
$('.burger-btn').on('click',function(){//.btn_triggerをクリックすると
$('.burger-btn').toggleClass('close');//.btn_triggerにcloseクラスを付与(ボタンのアニメーション)
$('.nav-wrapper').toggleClass('fade');//.nav-wrapperに
$('body').toggleClass('noscroll');//bodyにnoscrollクラスを付与(スクロールを固定)
});
// ここを追加でページ内リンクOK
$('a[href^="#"]').on('click', function() {
$('.burger-btn').click();
})
// ここまでを追加でページ内リンクOK
コピペOKです。
コメント