ㅠㅠ클릭시 슬라이드로 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에서 키우는 방법이 열리는느낌일겁니다.
서브메뉴 다시올라가는건
클래스가 겹쳤거나 부모클래스에 걸려서 같이 동작하는 이유일수있겠네요