ハンバーガーメニューページ内リンク飛ばない時の解消
JavaScriptを使って作成したハンバーガーメニューで、
リンクをクリックした時に、ハンバーガーのウインドウが
消えない状態の解消方法を書いていきます。
ハンバーガーメニューから、リンクをクリックしたとき、
別のサイトへのリンクの場合は、いい感じでリンク先が
表示されるので、JavaScriptは動作してるのは確認。
でも、IDを使って、同じページ内リンクの場合は、
ページが、表示されない。
よく調べてみると、リロードかけるとリンク先が
表示されるので、リンクは出来てるが、ハンバーガー
のウインドウが消えてないのが原因とわかった。
では、このウインドウを消すにはどうすればいいのか、
色々探してみたが、よくわからない。
今回検索してわかったのは、JavaScriptの書き方
はほんとに、たくさんあるのがわかった。
調べたキーワード
ハンバーガーメニューページ内リンク時メニューが閉じない
で探せばよかった感じです。
toggleClass
実際この方法で探しても、見つからないので、
出てきたコードを片っ端から内容変更して調べました。
結果、何とか思った動作が出来るようになったので、
記事に残しておきます。
サンプルコードも書いときますので、参考にしてください。
完成したハンバーガーメニューはこちらになります。
CodePen
結論、最終的にJavaScriptに、２行のコードを追加で完了でした。
追加したコードはこちらになります。
$(‘a[href^=”#”]’).on(‘click’, function() {
$(‘.burger-btn’).click();
})
今回参考にしたコードはPENGIN LLC.さんのページより
今回、使用したコードはPENGIN LLC.さんの
下記のページのコードを元に作成させていただきました。
【コピペOK】ハンバーガーメニューの作り方（js学習ステップ第四弾）
ページ内リンクのない、外部リンクだけなら、こちらのコードで
綺麗に動作しました。
PENGIN LLC.さんのブログはよく参考にさせてもらってます。
サンプルコード
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 |
/** * 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
|
1 2 3 4 5 6 7 8 9 10 |
$('.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です。
今回改めて感じたことは、HTML/CSSは独学でもなんとかなる
れべるですが、JavaScriptとかも入ってくると、独学じゃ限界
あるかな？
最近はちょっと感じてます。
やっぱ、プログラミングを本格的に学ぶには、わからない所を
聞ける環境も必要じゃないかなと最近感じてます。
ひそかに、最近調べてはいます。
その辺も記事にしてるので、参考にしてください。
おすすめ教材
 |
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
コメント