ㅠㅠ클릭시 슬라이드로 div보이게..하는방법 도와주세요.

ㅠㅠ클릭시 슬라이드로 div보이게..하는방법 도와주세요.

QA

ㅠㅠ클릭시 슬라이드로 div보이게..하는방법 도와주세요.

본문

https://gis.forestdata.kr/ 시각화 탭의 메뉴를 누르면 옆으로 설명창이 뜨는데 저도 저렇게 설명창 뜨게 하고 싶어요.... 

 

      //-------사이드바 슬라이드-------//

      const firstListItem = document.querySelector('.warning-sub li:first-child');

      const contentsWrap = document.getElementById('contentswrap');

      const navWrap = document.getElementById('navwrap');

      const navWrapWidth = navWrap.offsetWidth;

      const closeBtn2 = document.querySelector('.closebtn2');

 

      // 초기 위치 및 상태 설정

      contentsWrap.style.transform = `translateX(-${0}px)`;

      contentsWrap.style.opacity = '0';

 

      firstListItem.addEventListener('click', function() {

         // contentsWrap를 부드럽게 나타나도록 변경

         contentsWrap.style.transition = 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out';

         contentsWrap.style.transform = 'translateX(0)';

         contentsWrap.style.opacity = '1';

 

         // navWrap를 숨김

         navWrap.style.transition = 'transform 0.3s ease-in-out';

         navWrap.style.transform = `translateX(-${0}px)`;

      });

 

      //---------사이드바 닫힘 버튼--------//

      closeBtn2.addEventListener('click', function() {

         // contentsWrap를 숨김

         contentsWrap.style.transition = 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out';

         contentsWrap.style.transform = `translateX(-${0}px)`;

         contentsWrap.style.opacity = '0';

 

         // navWrap를 원래 위치로 되돌림

         navWrap.style.transition = 'transform 0.3s ease-in-out';

         navWrap.style.transform = 'translateX(0)';

      });

 

 

 

이건 제 스크립트 코든데 저렇게 허면 옆으로 열리는?느낌보다는 디졸브되는 것 처럼 페이드인아웃되듯 보여서요..그리구 클릭하고 설명창 보이고 나면 서브메뉴도 다시 올라가는데 고정 됐으면 좋겠어요 흑

 

 

 

이 질문에 댓글 쓰기 :

답변 1

열리는 느낌이라면 opacity 부분빼고 width를 0에서 키우는 방법이 열리는느낌일겁니다.

서브메뉴 다시올라가는건

클래스가 겹쳤거나 부모클래스에 걸려서 같이 동작하는 이유일수있겠네요

답변을 작성하시기 전에 로그인 해주세요.
전체 88
QA 내용 검색

회원로그인

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