모바일 화면 전체에 css 트랜지션(transition) 적용
본문
안녕하세요!!
모바일 화면에서 사이드 메뉴 css를 시도하면서
transition: background-color .5s;
트랜지션을 넣었는데 이상하게 적용이 됩니다..
모바일 사이드 메뉴는 기능상 스킨쪽에 들어가고
트랜지션은 테마에 들어갑니다
이유는, 원하는 게 사이드 메뉴 펼쳐졌을 때 배경이 검게 변하는 건데,
테마 메뉴까지...화면 전체가 그렇게 됐으면 해서 테마쪽에 트랜지션을 넣었어요
트랜지션 넣은 위치는 테마 모바일 css입니다
hd
wrapper
container
그외 등등..여기서 배경이 검어지는 것까진 어찌어찌 적용이 되는데,
게시판 스킨의 입력칸들은 또 하얗네요...??;;;
어디에 트랜지션을 넣어야 화면 전체에 적용될까요...?
고수님들 부탁드립니다^^ㅠㅠ
html
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
메뉴들어가는곳
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"> 메에뉴</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "white";
}
</script>
css
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ddd;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
출처 www.w3schools.com
답변 1
답변 감사합니다! 그 제이쿼리 부분은 어떻게 적용하면 될까요? write.php 파일 안에 넣고 싶어요
<script>, <?php 감싸는 건 안되네요.. 아니면 다른 파일에 넣어야 하나요?
모바일에서 이상하게 적용이 안되네요^^ㅠㅠㅠ 제가 코드를 잘못넣은 건 아닌 것 같은데...답변은 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
