『ラゴン・ジュルナル』に来てくださってありがとうございます!

「JavascriptをOn」にしていない端末やブラウザで閲覧しているかたに、このアラートが表示されるようになっております。Javascriptを許可してからおたのしみくださいませ。

Chrome「設定」→「詳細設定」→「プライバシーとセキュリティー」→「サイトの設定」→「Javascript」を許可 iPhone「設定」→「Safari」→「セキュリティ」→「Javascript」をオン iPad「設定」→「Safari」→「詳細」→「Javascript」をオン Android「メニュー」→「設定」→「高度な設定」→「Javascriptを有効」など

ハンバーガーメニューのオープン時にメニュー以外のところをタップすると戻るようにしました。

サイト改善記録 #21

サイト

Lagon Journal

なにをどうしたか

右上のボタンを押して表示したハンバーガーメニューを消したいときに、右上のボタンをもう一度押さないと消せなかったのを、範囲を広げて、リンク以外の箇所を押しても消せるようにしました。

変えたところ

<input id="toggle-ham" class="toggle" type="checkbox" />
<!-- (省略) -->
<div id="ham-menu" class="menu">
    <div>
        <ul id="ham-ul">
            <!-- (省略) -->
        </ul>
    </div>
</div>

必要なところにidを追加しました。ハンバーガーメニューの表示/非表示を制御しているcheckboxにtoggle-ham、ハンバーガーメニューの一番外側のところにham-menu、リンクのリストの枠にham-ulをつけました。toggle-hamがチェックされているときはハンバーガーメニューが表示され、チェックされていないときは表示されません。

document.getElementById("ham-menu").addEventListener("click", function(e) {
    if (e.target.closest("#ham-ul")) return;
    document.getElementById("toggle-ham").checked = false;
})

ハンバーガーメニューは画面全体を覆うので、ハンバーガーメニューの全体の枠であるham-menuにクリックイベントをつけました。クリックしたところ(e.target)がham-ulのところとかぶっているかを判定して、かぶっていたら何もせず、かぶっていなかったらチェックボックスのチェックを外して、メニューを閉じるようにしています。ちなみに、かぶっていたらtrueが返ってきて、かぶっていなければfalseが返ってきます。

それでは、ここまで読んでくださり、ありがとうございました。