모바일 576px일시 전체메뉴 오른쪽으로 슬라이드 되는 html+css+script 입니다. > 영카트5 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

영카트5 팁자료실

모바일 576px일시 전체메뉴 오른쪽으로 슬라이드 되는 html+css+script 입니다. 정보

모바일 576px일시 전체메뉴 오른쪽으로 슬라이드 되는 html+css+script 입니다.

본문


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Slide Menu</title>
  <style>
    .slide-menu-mn {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background-color: #fff;
      transition: left 0.3s ease-in-out;
    }
    
    .slide-menu-mn.active {
      left: 0;
    }
    
    .close-btn-mn {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      color: #000;
    }
    /* 576px 이상인 경우에는 슬라이드 메뉴가 열리지 않음 */
    @media (min-width: 576px) {
      .slide-menu-mn {
        display: none;
      }
      .float-l {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div id="slide-menu-mn" class="slide-menu-mn">
    <!-- 슬라이드 메뉴 내용 -->
    <button type="button" id="close-btn-mn" class="close-btn-mn">
      <i class="comp_icon_lnb_close">X</i>
    </button>
    <h1>Slide Menu</h1>
    <ul>
      <li><a href="#">메뉴 1</a></li>
      <li><a href="#">메뉴 2</a></li>
      <li><a href="#">메뉴 3</a></li>
    </ul>
  </div>
  <div class="float-l">
    <button type="button" class="btn-mn"> 
      <i class="icon-gnb icon-threebar d-block"></i>
    </button> 
  </div>
  <script>
    const slideMenu = document.getElementById('slide-menu-mn');
    const openButton = document.querySelector('.btn-mn');
    const closeButton = document.getElementById('close-btn-mn');
    // 슬라이드 메뉴 열기
    openButton.addEventListener('click', () => {
      slideMenu.classList.add('active');
    });
    // 슬라이드 메뉴 닫기
    closeButton.addEventListener('click', () => {
      slideMenu.classList.remove('active');
    });
  </script>
</body>
</html>
추천
1

댓글 0개

전체 393
영카트5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT