Jquery 클릭 드롭다운 메뉴 - jquery keullig deulobdaun menyu

CSS 및 JavaScript를 클릭 할 수있는 드롭 다운 메뉴를 만드는 방법에 대해 알아보십시오.

쓰러지 다

드롭 다운 메뉴는 사용자가 미리 정의 된 목록에서 하나 개의 값을 선택할 수있는 전환 가능한 메뉴입니다 :

클릭 가능한 드롭 다운 만들기

사용자가 버튼을 클릭했을 때 나타나는 드롭 다운 메뉴를 만듭니다.

1 단계) HTML을 추가합니다 :

예

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

예 설명

드롭 다운 메뉴, 예를 들면 <버튼> 열고있는 요소를 사용 <a> 또는 <p> 요소.

컨테이너 요소 사용 (like <div>) 드롭 다운 메뉴를 만들고 그 안에 드롭 다운 링크를 추가합니다.

랩 <div> 버튼 주변의 요소를 <div> CSS 제대로 드롭 다운 메뉴를 배치합니다.

2 단계) CSS를 추가 :

예

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

예 설명

우리는 효과를 가져 배경 색상, 패딩 드롭 다운 버튼 스타일 한 등

.dropdown 클래스 사용 position:relative , 우리는 드롭 콘텐츠를 원할 때 필요한 오른쪽 드롭 다운 버튼 아래에 배치되는 (using position:absolute ) .

.dropdown-content 클래스는 실제 드롭 다운 메뉴를 보유하고 있습니다. 그것은 기본적으로 숨겨져 있으며, 호버에 표시됩니다 (see below) . 노트 min-width 160 픽셀로 설정된다. 이 설정을 변경하시기 바랍니다. 팁 : 드롭 다운 콘텐츠의 폭이 드롭 다운 버튼으로 폭과 같거나 넓은하려면 설정 width (100 %로 overflow:auto 작은 화면에 스크롤을 가능하게).

대신 테두리를 사용하여, 우리는 사용하고 box-shadow 드롭 다운 메뉴가처럼 보이게 속성을 "card" .

3 단계) 자바 스크립트를 추가합니다

예

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

»그것을 자신을 시도

네비게이션 바에있는 드롭 다운 메뉴

팁 : 우리의 이동 CSS 드롭 다운 튜토리얼 드롭 다운에 대한 자세한 내용은.

버튼을 클릭 했을 때 드롭다운 메뉴가 나타나게 하는 것까지는 했다고 치자.

여기서 메뉴를 클릭하지 않고 다른 곳을 클릭 했을 때 드롭다운 메뉴가 사라지는 방법에 대해 다루겠다.

알고 보면 별 것 아닌데 모르면 어렵게 구현해야 한다.

1. HTML

<div class="button-container">
  <button class="button">클릭</button>
  <div class="dropdown">
    <div class="dropdown-item">서울</div>
    <div class="dropdown-item">대전</div>
    <div class="dropdown-item">대구</div>
    <div class="dropdown-item">부산</div>
  </div>
</div>

반드시 button 엘리먼트를 써서 이벤트를 구현해야 한다.

input류의 엘리먼트만 blur 이벤트가 적용되기 때문이다.

(일반 엘리먼트에 blur 이벤트를 넣고 싶다면 tabindex 속성을 활용하자.)

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex

blur 이벤트는 선택이 해제됐을 때 발생하는 이벤트다.

버튼을 클릭했을 때 버튼을 선택한 상태가 되고 (focus)

버튼이 아닌 다른 곳을 클릭하면 선택 상태가 해제되어 button에 blur 이벤트가 발생한다.

2. Javascript

const button = document.querySelector('.button');

button.addEventListener('click', () => {
  const dropdown = document.querySelector('.dropdown');
  dropdown.style.display = 'block';
});

button.addEventListener('blur', () => {
  const dropdown = document.querySelector('.dropdown');
  dropdown.style.display = '';
});

button을 클릭했을 때 dropdown의 display를 보여주고(block)

button 선택이 해제될 때(blur) display를 원상태로 돌린다.

CSS에서 display의 값을 none으로 했기 때문에 빈 string을 넣어주면 원래 상태로 돌아간다.

다만 다른 곳을 클릭할 때 뿐만 아니라

드롭다운 내부의 아이템을 클릭하는 경우에도 blur 이벤트가 발생하기 때문에

클릭시 blur 이벤트가 먼저 발생하고 드롭다운이 사라져 아이템 클릭 이벤트가 먹히지 않을 수 있으니

아래처럼 setTimeout을 추가해서 드롭다운이 사라지는 시간을 살짝 지연시키든지 하는 작업이 더 필요하다.

button.addEventListener('blur', () => {
  const dropdown = document.querySelector('.dropdown');
  
  // 0.2초 뒤에 실행
  setTimeout(() => {
    dropdown.style.display = '';
  }, 200);
});

더 간단한 방법으로 드롭다운의 아이템 클릭시 발생하는 이벤트에 click 이벤트 대신 mousedown 이벤트를 쓰면

blur 이벤트 이전에 호출되기 때문에 위 문제를 쉽게 해결할 수 있다.

https://stackoverflow.com/questions/12092261/prevent-firing-the-blur-event-if-any-one-of-its-children-receives-focus

3. CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100vh;
}

.button-container {
  position: relative;
}

.button {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid grey;
  padding: 10px;
  font-size: 1rem;
  cursor: pointer;
  outline: none;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  border: 1px solid grey;
}

.dropdown-item {
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background: whitesmoke;
}

body는 가운데 정렬을 위한 설정이고

부모인 button-container의 position을 relative로 하고 자식인 dropdown을 absolute로 해야

부모 위치를 기준으로 dropdown의 위치를 조절 할 수 있다.

여기서는 top에 100%를 줘서 부모의 height 만큼 내려오게 하여

button 바로 밑에 dropdown이 붙도록 했다.

left에 50%를 주면 왼쪽 모서리가 부모의 중간 지점에 오고

transform에 translateX(-50%)를 주면 자신의 width 반절만큼 왼쪽으로 움직인다.

결과적으로 아래처럼 부모를 기준으로 가운데 정렬이 된다.