対象者
- ハンバーガーメニュー実装を考えている方
- メニューを閉じているのに中身をクリックできる不具合が出ている方
目的
- ハンバーガーメニューの実装
- 不具合の解消
実際の手順と実例
1.前提とエラー
下記の記事を参考にハンバーガーメニューを実装しました。
しかし、閉じている状態でも中身のリンクをクリックできる不具合に遭遇したので、これを解消していきたいと思います。
2.結論(解決策)
CSSが今回の原因でした。
before
application.scss
/* ナビが開いた状態 */
nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
opacity: 100;
}
after
application.scss
/* ハンバーガーメニューの中身 */
nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
visibility: hidden; #ここを追加
}
/* ハンバーガーメニューが動いたとき */
nav.globalMenuSp.active {
opacity: 100;
visibility: visible; #ここを追加
}
3.原因
opacityを0にして透明になっていても、onclickイベントを拾ってしまうでした
opacityとは透明度を調整するCSSです。
また、visibilityは要素を非表示にするCSSです。
visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。
ここではvisibility: hidden;を指定してハンバーガーメニューの中身が隠れるようにしています。
その後visibility: visible;でハンバーガーメニューが動いた際に要素が可視化されるようになっています。