2017/09/20

メニュー以外の箇所をタップするとメニューが自動で戻るナビゲーション

UIを意識したくて作ったやつ。
メニューをスライドさせる動きとclassを付けるのをjQueryで行っています。

ハンバーガーメニューは以前作ったこちらを使いました。
CSSだけで作るハンバーガーメニュー

縦にメニューが出てくるナビゲーションですが、メニュー以外をタップした時に自動でナビが戻ります。

See the Pen 1709101 by M.Ueda (@nekuta) on CodePen.

.navをタップした時、.header_sp_navと.main_coverにactiveというクラスをつけます。
main_coverは予めposition:fixed;で固定し、大きさをブラウザ全体にしておいて、z-index:-1を掛け、重ね順を下にしておきます。activeが付いた時にz-indexの値を大きくして、重ね順を上に持ってきます。

js(iQuery)

$(function () {
	var sp_nav = $('.header_sp_nav');
	var nav = $('.nav');
	var main_cover = $('.main_cover');
	sp_nav.on('click', function () {
		nav.slideToggle();
		sp_nav.toggleClass('active');
		main_cover.toggleClass('active'); //nav以外をタップした時 
		if (sp_nav.hasClass('active')) {
			//もし.header_sp_navに'active'というクラスがあったら
			main_cover.on('click', function () {
				sp_nav.removeClass('active');
				main_cover.removeClass('active'); nav.slideUp();
			});
		}
	});
});

.hasClass(‘クラス名’)でその要素に指定のクラス名があるかどうか判断できます。そのクラスがある場合はtrue、ない場合はfalseを返します。クラス名は変数でも取得可能。