ボタンクリックで開閉して、ナビ本体以外をクリックで閉じるシンプルなナビゲーション

記事のタイトルの日本語が難しかったのでChatGPTに考えてもらいました。ありがとう技術。

さて、タイトルからしてどこにでもありそうなナビゲーションですが、全くもってその通りです。よろしくおねがいします。

ソースコード

html

<div id="mymenubtn">開閉</div>
<ul class="hidden" id="mymenu">
　　<li><a href="#">リンク</a></li>
　　<li><a href="#">リンク</a></li>
　　<li><a href="#">リンク</a></li>
</ul>

css

#mymenu.hidden{
  display: none;
}

javascript

const menuId = 'mymenu', menuBtnId = 'mymenubtn'
const menuObj = document.querySelector(`#${menuId}`); //メニュー本体
let isActiveMenu = false;
document.addEventListener('click', (e) => {
        if(e.target.closest(`#${menuBtnId}`)) {
            isActiveMenu = !isActiveMenu;
        }else if(isActiveMenu && !e.target.closest(`#${menuId}`)){
            isActiveMenu = false;
        }
        isActiveMenu ? menuObj.classList.remove('hidden') : menuObj.classList.add('hidden');
});

振り返り

この部分、もう少しかっこよく書きたいなと思いました。

isActiveMenu ? menuObj.classList.remove('hidden') : menuObj.classList.add('hidden');

JavaScriptを書いてたら、ちょうどわかりやすいES2015っぽさ（const/let, テンプレートリテラル, アロー関数, 三項演算子）が出てなんか嬉しかったので集中力が切れ、今こうしてブログを書いています。

おわり🏆