TOP Navigation

위에 버튼 누르면 메뉴 등장

아무데나 눌러도 메뉴 사라짐

---

HTML

<div class="dropdown">
  <div class="underline">
    <svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 448 512"
    onclick="myFunction()" class="dropbtn" id="btn">
      <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 
      0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/>
  </svg>
  </div>
  <div id="myDropdown" class="dropdown-content underline">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </div>
</div>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, 
    sit expedita earum architecto ducimus ipsam libero qui quam ex eligendi 
    nobis vel excepturi! Iste facere dolore vitae fugit. Impedit, earum.
</p>

CSS

<style>
.dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
}

.dropdown-content {
  display: none;
  background-color: transparent;
  overflow: auto;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.show {
  display: block;
}

p {
  margin-top: 100px;
}

.underline {
  border-bottom: 1px solid #555;
}

</style>

JS

<script>

  console.log(btn)

  function myFunction() {

    //버튼 누를 때마다 리스트 나타남
  document.getElementById("myDropdown").classList.toggle("show");
  }

  // 화면을 클릭했을 때
  // 이벤트 감지 영역(경기장)
  document.addEventListener('click', function(e) {

    // 클릭한 부분이 버튼이 아닐 때
    if (e.target !== btn) {
      //메뉴 사라짐
      document.getElementById("myDropdown").classList.remove("show");
    }
  })

</script>

---

Event Target

-> Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체 가리킴
-> 이벤트 중 원하는 데이터만 매개변수로 파라미터로 넘겨줌