사이트에 슬라이딩 사이드바 메뉴를 추가하는 방법

13249 단어 csswebdevhtmlbeginners
빌드할 항목은 다음과 같습니다.



아래에는 관련 코드만 설명하겠습니다. 전체 코드를 보고 싶다면 위의 codepen을 확인하세요.

HTML




<body>
  <div class="menu-sidebar">
    <div class="sidebar-content">
      <button class="close-menu-button">
        <!-- close button icon -->
      </button>
    </div>
  </div>
  <div class="overlay"></div>
  <div class="main-page">
    <div class="header">
      <button class="menu-button">
        <!-- menu icon -->
      </button>
    </div>
    <h1>Page Title</h1>
    <p>
      Lorem ipsum dolor sit amet...
    </p>
  </div>
</body>


이 HTML은 네 가지 주요 부분으로 구성됩니다.
  • 사이드바: .menu-sidebar
  • 메인 페이지 섹션: .main-page
  • 사이드바를 여는 버튼: .menu-button
  • 사이드바가 열려 있을 때 기본 페이지 상단에 표시되는 오버레이: .overlay

    • 이 UI에는 유휴 및 사이드바 열림 상태라는 두 가지 상태가 있습니다. <body>에 클래스를 설정하여 켜져 있는 상태를 지정합니다. 모든 래퍼 요소가 될 수 있지만 이 예에서는 body를 사용합니다. 이 데모에서는 사이드바 열기 상태에 대해 sidebar-open 클래스를 사용했습니다.

    CSS를 사용하여 각 상태에 대한 스타일을 정의하고 sidebar-open 클래스가 body로 전환되면 올바른 스타일이 적용되어 transition로 애니메이션됩니다.

    다음은 각 상태에 대한 스타일을 정의하는 예입니다.

    .main-page {
  // Styling for the main page when in idle state
}

body.sidebar-open .main-page {
  // Styling for the main page when in sidebar-open state
}


    CSS




    /* Sidebar-open state for body */
body.sidebar-open {
  overflow: hidden;
}

/* Idle state for the sidebar */
.menu-sidebar {
  width: 500px;
  height: 100%;
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  transition: 0.5s ease translate;
  translate: -100% 0;
  will-change: transform;
}

/* Sidebar-open state for the sidebar */
body.sidebar-open .menu-sidebar {
  translate: 0 0;
}

/* Idle state for the main page */
.main-page {
  transition: 0.5s ease translate;
  will-change: transform;
}

/* Sidebar-open state for the main page */
body.sidebar-open .main-page {
  translate: 500px 0;
}

/* Idle state for the overlay */
.overlay {
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: 0.5s ease opacity;
}

/* Sidebar-open state for the overlay */
body.sidebar-open .overlay {
  opacity: 1;
  pointer-events: all;
}

/* When on tablet-size screen, make the sidebar open in full width above the main page */
@media (max-width: 768px) {
  .menu-sidebar {
    width: 100%;
  }
  body.sidebar-open .main-page {
    translate: 0 0;
  }
}


    요소가 각 상태에 어떻게 있는지 봅시다.

    사이드바( .menu-sidebar ):
  • 사이드바가 페이지 흐름의 일부가 되는 것을 원하지 않으므로 position: fixed 로 배치합니다.
  • 열 때 기본 페이지 위에 나타나게 하려면 z-index를 .overlay 및 기본 페이지보다 큰 값으로 설정해야 합니다. 그래서 z-index: 2로 설정했습니다.
  • 너비를 500px로 선택했지만 원하는 너비를 선택할 수 있습니다.
  • 유휴 상태에서 사이드바는 뷰포트 외부에 위치해야 합니다. 설정translate: -100% 0은 전체 너비만큼 왼쪽으로 이동합니다.
  • 더 나은 성능을 위해 translate 를 사용하여 사이드바에 애니메이션을 적용하고 이를 더욱 개선하려면 요소를 새 레이어로 승격해야 합니다. 그것이 will-change가 하는 일입니다.
  • 사이드바가 열린 상태에서 사이드바translate는 0 0가 되어 원래 위치로 다시 이동하고 transition를 사용하면 오른쪽으로 움직이는 것처럼 나타납니다.

    • 기본 페이지( .main-page ):
  • 유휴 상태에서는 아무 것도 할 필요가 없습니다. 애니메이션을 위해 transition 및 will-change가 있는지 확인하기만 하면 됩니다.
  • 그러나 사이드바가 열린 상태일 때 이 요소는 사이드바와 같은 너비만큼 오른쪽으로 이동해야 합니다. 이 경우에는 500px입니다.

    • 오버레이(.overlay):
  • 전체 화면을 덮는 전체 너비와 높이가 있는 고정 요소입니다. 또한 그 아래 메인 페이지를 볼 수 있도록 투명한 배경이 있습니다background: rgba(0, 0, 0, 0.5).
  • 유휴 상태에서는 숨겨야 합니다. opacity: 0로 애니메이션을 적용하고 싶기 때문에 display: none가 아닌 transition: 0.5s ease opacity를 사용합니다.
  • opacity: 0가 있는 요소가 페이지에 여전히 존재하지만 표시되지 않습니다. 따라서 .overlay 를 클릭하게 되므로 페이지의 아무 항목이나 클릭해도 작동하지 않습니다. 이 문제를 해결하기 위해 pointer-events: none 를 설정하여 모든 마우스 및 터치 이벤트를 비활성화합니다.
  • 사이드바가 열린 상태일 때 사이드바를 표시하고 클릭을 활성화하기만 하면 됩니다(따라서 사이드바를 클릭하면 사이드바가 닫힙니다). 이를 위해 opacity: 1 및 pointer-events: all를 설정합니다.

    • 자바스크립트



    이 작업을 수행하기 위한 마지막 단계는 메뉴 버튼, 오버레이 또는 닫기 버튼을 클릭할 때 본문의 클래스를 토글sidebar-open하는 것입니다.

    const menuButton = document.querySelector('.menu-button')
const overlay = document.querySelector('.overlay')
const closeMenuButton = document.querySelector('.close-menu-button')

menuButton.addEventListener('click', toggleMenu)
overlay.addEventListener('click', toggleMenu)
closeMenuButton.addEventListener('click', toggleMenu)

function toggleMenu() {
  document.body.classList.toggle('sidebar-open')
}
    골랑 부서
    React에서 분기된 웹팩 사용자 정의 모듈로 해결할 수 없습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage