웹 애플리케이션에 대한 사용자 정의 상황에 맞는 메뉴를 만드는 방법

시작하기 전에 만들게 될 항목의 미리보기가 있습니다.




사용자 지정 상황에 맞는 메뉴의 몇 가지 사용 사례에 대해 논의해 보겠습니다.

기본 메뉴가 아닌 웹 앱 영역에 사용자 정의 상황에 맞는 메뉴를 표시하려고 합니다.

사용 사례를 모두 살펴보았지만 확실하게 다른 몇 가지를 생각해 볼 수 있습니다.

코딩하자!

먼저 HTML을 사용하여 사용자 지정 상황에 맞는 메뉴를 나타내는 항목 목록을 만듭니다.

<div class="menu">
  <ul class="menu-options">
    <li class="menu-option">Back</li>
    <li class="menu-option">Reload</li>
    <li class="menu-option">Save</li>
    <li class="menu-option">Save As</li>
    <li class="menu-option">Inspect</li>
  </ul>
</div>

그런 다음 몇 줄의 scss를 추가하여 사용자 지정 메뉴를 새로 고칩니다. 보기 좋고 깨끗해 보이게 합니다.

.menu {
  width: 120px;
  box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  display: none;

  .menu-options {
    list-style: none;
    padding: 10px 0;

    .menu-option {
      font-weight: 500;
      font-size: 14px;
      padding: 10px 40px 10px 20px;
      cursor: pointer;

      &:hover {
        background: rgba(0, 0, 0, 0.2);
      }
    }
  }
}

메인 코스로

페이지에서 컨텍스트 메뉴를 보기 위해 마우스 오른쪽 버튼을 클릭할 때마다 이벤트가 트리거됩니다. 이벤트 이름은 (맞추셨군요) contextmenu 입니다. 미쳤지? 그다지.
가장 먼저 할 일은 이 이벤트를 수신한 다음 기본 동작이 트리거되지 않도록 하는 것입니다.

window.addEventListener("contextmenu", e => {
  e.preventDefault();
});

여기서 우리는 전체 창에서 contextmenu 이벤트를 수신하지만 전체 창이 아닌 특정 영역을 항상 지정할 수 있습니다.

이제 이를 정리했으므로 이벤트 콜백에서 바로 사용자 정의 상황에 맞는 메뉴 표시를 설정합니다. 메뉴를 표시할 위치를 결정하기 위해 이벤트 개체의 두 속성을 사용할 것입니다. 사용자의 클릭이 시작된 영역이 됩니다.



이벤트 콜백의 pageX 및 pageY 속성은 컨텍스트 메뉴 요청이 트리거되었을 때 마우스의 위치를 ​​설명합니다. 해당 지점에 상황에 맞는 메뉴를 배치하고 싶을 것입니다. 이러한 변경 사항을 반영하도록 js 코드를 업데이트하겠습니다.

const toggleMenu = command => {
  menu.style.display = command === "show" ? "block" : "none";
};

const setPosition = ({ top, left }) => {
  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  toggleMenu('show');
};


window.addEventListener("contextmenu", e => {
  e.preventDefault();
  const origin = {
    left: e.pageX,
    top: e.pageY
  };
  setPosition(origin);
  return false;
});

toggleMenu 함수는 메뉴 표시를 토글하고 setPosition 함수는 메뉴의 위치를 ​​설정합니다. 함수 이름은 정말 자명합니다.

이제 완전히 작동하는 상황에 맞는 메뉴가 있어야 하지만 메뉴가 사라지지 않는 문제가 있습니다. 따라서 컨텍스트 메뉴가 표시되는 경우 이를 숨기도록 다른 이벤트 리스너를 설정해야 합니다. 이를 위해 사용자 정의 상황에 맞는 메뉴를 설정한 창 또는 영역에서 click 이벤트를 수신합니다.

const menu = document.querySelector(".menu");
let menuVisible = false;

const toggleMenu = command => {
  menu.style.display = command === "show" ? "block" : "none";
  menuVisible = !menuVisible;
};

const setPosition = ({ top, left }) => {
  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  toggleMenu("show");
};

window.addEventListener("click", e => {
  if(menuVisible)toggleMenu("hide");
});

window.addEventListener("contextmenu", e => {
  e.preventDefault();
  const origin = {
    left: e.pageX,
    top: e.pageY
  };
  setPosition(origin);
  return false;
});

js 파일의 최종 모습입니다. 작동하는 상황에 맞는 메뉴가 있지만 평소와 같이 상황에 맞는 메뉴가 정말 고급스러워지려면 몇 가지 개선이 필요합니다.

클릭이 창의 맨 아래 또는 맨 위에 매우 가까이 있을 때 메뉴를 배치하는 방법입니다.

몇 가지 애니메이션을 추가하여 메뉴 진입 및 종료를 원활하게 합니다.

이를 달성하려면 몇 줄의 코드만 있으면 됩니다. 나는 당신이 그것을 알아낼 수 있다고 믿습니다. 전체 코드 베이스는 codepen을 확인하십시오. 제안 및 문제에 대해 트위터에서 저를 때리십시오