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

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

QA

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

답변 1

본문

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에서 키우는 방법이 열리는느낌일겁니다.

서브메뉴 다시올라가는건

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 947
© SIRSOFT
현재 페이지 제일 처음으로