クリックして表示したメニューを異なるところをクリックすると非表示にする

アンカーリンクメニューなどで、下や横にサブメニューを出したいときに
表示ボタン以外のところをクリックしてもメニューが閉じるようにしたいときって
ありますよね？

今回はそちらを実装してみました。
まずはデモから！

See the Pen PowrjMX by sayuri (@giraffeweb) on CodePen.default

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="wrap">
<div id="tabMenu">
  <div class="menu">
    <p>MENU</p>
    <ul>
      <li><a href="#a">A</a></li>
      <li><a href="#b">B</a></li>
      <li><a href="#c">C</a></li>
    </ul>
  </div>
</div>

<div id="a" class="textBox">
  <h2>A</h2>
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </p>
 </div>

<div id="b" class="textBox">
  <h2>B</h2>
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </p>
 </div>

<div id="c" class="textBox">
  <h2>C</h2>
  <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  </p>
 </div>
  </section>

body {
  margin: 0;
  padding: 0;
}


#wrap{
  width: 100%;
  padding-bottom: 300px;
  position: relative;
}

#tabMenu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
	.menu {
		p {
        display: inline;
				padding: 10px;
        color: #fff;
        font-weight: 600;
				background-color: #333;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				-webkit-border-top-left-radius: 6px;
				-webkit-border-top-right-radius: 6px;
				-moz-border-radius-topleft: 6px;
				-moz-border-radius-topright: 6px;
        letter-spacing: .1em;
        margin-bottom: 0;
		}
		ul {
			  background-color: #333;
        display:flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
			li {
				  width: calc(100% / 3 - 4px);
				  margin: 2px;
          list-style: none;
				a {
					 font-size: 14px;
           color: #fff;
           text-decoration: none;
           padding: 5px;
           border: 1px solid #ddd;
           display: block;
           text-align: center;
          &:hover {
            background-color: #fff;
            color: #333;
          }
				}
			}
		}
	}
}

.textBox {
  padding: 30px;
  background-color: #ddd;
  display: block;
   margin: 0 auto 50px auto;
  width: calc(100% - 40px);
  max-width: 1000px;
  h2 {
    font-size: 22px;
    font-weight: 600;
  }
}

 $(function () {
		 $('#tabMenu p').click(function(){
			$(this).next('ul').slideToggle();
		});
		$('#tabMenu ul li a').click(function () {
		$(this).parents('#tabMenu ul').slideUp();
		});
    });

大きな説明はいらないかなー？と思います。
皆さんも好きなIDなどを使用して実装してみてくださいね✨

Share: