transform 이용한 사이드 메뉴 새로고침시 보여요
본문
$(function(){
$('.menu').click(function(){
$('.nav').addClass('disblock');
});
$('.close').click(function(){
$('.nav').removeClass('disblock');
});
});
/*-------메뉴------*/
.disblock {
visibility: visible !important;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0) !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav {
visibility: hidden;
width: 100%;
max-width: 640px;
position: absolute;
top: 68px;
border-bottom: 2px solid #909090;
webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
위 코드를 이용해서 사이드메뉴 만들었는데 새로고침시 사이드 메뉴가 보입니다.
위 gif 참고해주세요!
혹시 이거 안보이게 하는 방법이 있나요?ㅠㅠ
오퍼시티도 줬는데도 안되네요ㅠㅠ
답변 1
.nav {
visibility: hidden !important;
}
이건 안됩니다ㅠ
display:none !important 로 메뉴에 넣으시구요.
display:none 넣으면 트랜스폼이 작동되지 않습니다
html소스기재부탁드려요
답변을 작성하시기 전에 로그인 해주세요.