【CSS/JS】どこをタップしても閉じるナビゲーション

レスポンシブデザインで使用するナビゲーションの備忘録です。

普通にボタンをタップするのではなく、ナビゲーションを閉じる場合はどこをタップしても閉じるような仕様になっています。jqueryなどのライブラリは使っていません。

See the Pen Navigation by iwamoto (@iwamotosoichiro) on CodePen.

HTML

navタグの外にナビゲーション用のボタンは記述しています。

<div class="navBtn" id="jsNavBtn">
        <span></span>
        <span></span>
        <span></span>
</div>
<nav id="jsNav">
        <ul>
          <li><a href="#">LINK01</a></li>
          <li><a href="#">LINK02</a></li>
          <li><a href="#">LINK03</a></li>
        </ul>
</nav>

CSS

javascriptでナビゲーションのボタンをクリックするとbodyにopenNavというクラスが付与されるようになるので、ナビゲーションが開いた時のスタイルは.openNav nav　とかいう形で記述します。（ボキャブラリーなくてすみません）

/*---------------------
nav 画面
----------------------*/
nav{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    z-index:-100;
    opacity:0;
    visibility:hidden;
    transition:0.3s;
  }
  nav ul{
    list-style:none;
    margin-left:0;
    margin-top:50vh;
    transform:translateY(-50%);
  }
  nav ul li{
    height:30px;
    line-height:30px;
    margin-bottom:30px;
    text-align:left;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
nav ul li a{
  text-decoration:none;
  color:#fff;
  font-family:sans-serif;
}
/*--openNav---*/
.openNav nav{
    opacity:1;
    visibility:visible;
  }
/*---------------------
navigation btn
----------------------*/
.navBtn{
    position:fixed;
    z-index:32b2b2b;
    width:30px;
    height:18px;
    top:15px;
    right:5%;
    cursor:pointer;
    opacity:1;
    visibility:visible;
  }
.navBtn span{
    display:block;
    width:100%;
    height:2px;
    background:#2b2b2b;
    transition:opacity 0.3s,transform 0.3s;
  }
.navBtn span:nth-of-type(1),
.navBtn span:nth-of-type(2){
    margin-bottom:6px;
  }
.navBtn span:nth-of-type(1),
.navBtn span:nth-of-type(3){
    transition-delay:0s;
  }
.navBtn span:nth-of-type(2){
    transition:0.3s;
    transition-delay:0.3s;
  }
  /*--.openNav-------*/
.openNav #jsNavBtn span{
  background:#fff;
}
  .openNav #jsNavBtn span:nth-of-type(1){
    transform:translateY(8px) rotate(45deg);
    transition-delay:0.3s;
  }
  .openNav #jsNavBtn span:nth-of-type(2){
    width:0;
    opacity:0;
    transition-delay:0s;
  }
  .openNav #jsNavBtn span:nth-of-type(3){
    transform:translateY(-8px) rotate(-45deg);
    transition-delay:0.3s;
  }

Javascript

先述していますがjavascriptではボタンをタップするとbodyにopenNavというクラス名が付与され、openNavが付与されている場合はボタンまたはナビゲーションをタップするとクラス名が消える形となります。

(function(){
		'use strict';
		
		var navBtn = document.getElementById('jsNavBtn');
		var nav = document.getElementById('jsNav');
		var body = document.body;
		var flag = 0;
		
		navBtn.addEventListener('click',function(){
			if(flag === 0){
			body.classList.add('openNav');
			flag = 1;
			}else{
			body.classList.remove('openNav');
			flag = 0;
			}
		});
		nav.addEventListener('click',function(){
			if(flag === 1){
			body.classList.remove('openNav');
			flag = 0;
			}
		});
	
	})();

まとめ

自分が良く使うナビゲーションの備忘録でした。