目標
Xボタンだけでなく、右側の表示領域をクリックしても、
ハンバーガーメニューが閉じるようにします。
開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina
前提
【Javascript】ハンバーガーメニュー作成（左、上、右から表示）
今回は上記記事の補足になります。
実際のコード
html
<divid="box"></div><!-- 追加 --><navid="nav"><ul><li><ahref="#">リンク1</a></li><li><ahref="#">リンク2</a></li><li><ahref="#">リンク3</a></li></ul></nav><divid="hamburger"><spanclass="inner_line"id="line1"></span><spanclass="inner_line"id="line2"></span><spanclass="inner_line"id="line3"></span></div><style>body{background-color:rgba(0,0,0,0.2);}#nav{position:absolute;height:100vh;width:40%;left:-40%;top:0;background:#ffffff;transition:.7s;}#navul{padding-top:80px;}#navulli{list-style-type:none;}#hamburger{display:none;position:absolute;top:20px;left:30px;width:50px;height:44px;transition:1s;}.inner_line{display:block;position:absolute;left:0;width:50px;height:3px;background-color:#000000;transition:1s;border-radius:4px;}#line1{top:0;}#line2{top:20px;}#line3{bottom:0px;}.in{transform:translateX(100%);}.line_1,.line_2,.line_3{background:#000000;}.line_1{transform:translateY(20px)rotate(-45deg);top:0;}.line_2{opacity:0;}.line_3{transform:translateY(-20px)rotate(45deg);bottom:0;}/* ここから*/#box{position:absolute;height:100vh;width:100%;left:-100%;top:0;background:rgba(0,0,0,0.8);}.back{transform:translateX(100%);}/* ここまで追加*/@media(max-width:1200px){#hamburger{display:block;}}</style><script>functionhamburger(){document.getElementById('line1').classList.toggle('line_1');document.getElementById('line2').classList.toggle('line_2');document.getElementById('line3').classList.toggle('line_3');document.getElementById('nav').classList.toggle('in');document.getElementById('box').classList.toggle('back');// 追加};document.getElementById('hamburger').addEventListener('click',function(){hamburger();});// ここからdocument.getElementById('box').addEventListener('click',function(){hamburger();});// ここまで追加</script>追加項目
追加箇所-html
<divid="box"></div>追加箇所-css
#box{position:absolute;height:100vh;width:100%;left:-100%;top:0;background:rgba(0,0,0,0.8);}.back{transform:translateX(100%);}追加箇所-js
document.getElementById('box').classList.toggle('back');document.getElementById('box').addEventListener('click',function(){hamburger();});まとめ
方法としては前提記事同様、画面外に表示させておき、
classList.toggle('back')でbackクラスを付与して表示させています。
アニメーションもつけることはできますが、
一緒に出てくると少し違和感があったので、アニメーションはつけていません。
もしスクロールアウトしてもハンバーガーメニューを表示させたい場合は、#nav,#hamburger,#boxのposition: absolute;をposition: fixed;
に変更すれば可能です。
またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら https://twitter.com/japwork