Closed6
CSSベースで作っているハンバーガーメニューで、ページ内へのリンクをクリックするとメニューが残ってしまうのでなんとかしたい
aikige困っていること
CSSでハンバーガーアイコン（☰）を押すとナビゲーションメニューが出てくるUI（ハンバーガーメニュー）を作っている場合に、ナビゲーションメニューのリンク先が同じページ内だとナビゲーションメニューが表示しっぱなしになるので、これをしまいたい。
解決策
以下のページの手順でできた
aikige前提
CSSによるハンバーガーメニューのTIPSに従い、ハンバーガーメニューは隠れた <input type="checkbox" id="something> という要素（チェックボックス）のON/OFFで表示をトグルしている。
問題の原因
ハンバーガーメニュー内のリンクがページ内の場合、表示に使っているチェックボックスのステータスは変化しないので、ハンバーガーメニューは隠れない。
基本的な考え方
JavaScript でメニュー内のリンクがクリックされた場合にチェックボックスを OFF にすれば所望の動作が得られる。
aikige技術的なポイント
スクリプトの <script> 要素は、以下のいずれかの方法で入れる：
-
<head>内に入れる -
<body>に入れる場合はメニューのHTMLの 後 に入れる。
メニューの前に <script> を入れると、Document構造の読み込み前にJavaScriptが実行されるため、動作をトリガする関数の登録に失敗する。
aikige動作確認した環境
Google Chrome: バージョン: 120.0.6099.234
aikige前述のリンク先よりシンプルな実装の例
aikigeチェックボックスをOFFにする関数（Gistだと hideNav()）を作って、それをナビゲーション（Gistだと id="navigation" の要素）をクリックした際に呼び出すようにするのが最もシンプル。
このスクラップは2024/01/27にクローズされました