구글 크롬 핸드폰 어플 질문 드려요~~
본문
모바일에서 사용 하는 버튼 으로 만들어 진 메뉴 버튼을을
<button type="button" id="gnb_open" class="hd_opener" style="display:none;">
<div class="menu_bar mb1"></div>
<div class="menu_bar mb2"></div>
<div class="menu_bar mb3"></div>
</button>
요렇게 체크 버튼으로 맹그러 봤는데요
메뉴들이 들어가 있는 #gnb 가 display:none; 상태가 아닌 right:-300px 을 줘서 클릭하면은
오른쪽으로 스르르륵 나오게 했는데 이게 지금
PC의 크롬, 파이어폭스, 익스플로러, 엣지 브라우져 그리고
핸드폰 네이버 앱 다음앱 까지 정상적으로 작동 되는데
이상하게 핸드폰 크롬 앱은 체크 박스 만 덩그러니 나오더라구요 그리고 CSS 도 안먹히더라구요
다른 페이지 에서 사용하는 체크박스는 CSS 가 먹히는데 지금 크롬앱자체가 이상한건가요??
다른분들도 그런가요?? 제가 이상하게 적어서 이렇게 나올것이다 하고 1시간 넘게 아래의 소스를 보는데 도저히 못찾겠더라구요~~ 아시는분 좀 가르쳐 주세요~~
---- 수정 할게요 핸드폰 크롬 쿠키 하고 캐시를 삭제 하니까 정상적으로 되네요
다른 질문 드리는데요
이 소스에서 사용한 css transform 이나 transition 같은 속성?? 이라고 해야 하나 이런것들은
브라우저나 핸드폰 기종에 관계없이 전부다 잘 돌아 가나요???
<style>
/* 버튼 만들기 */
input[id="ham_menu"]{display:none;}
input[id="ham_menu"] + .menu_btn{display:block;width:21px;height:14px;cursor:pointer;position:absolute;cursor:pointer;top:75px;left:20px;}
input[id="ham_menu"] + .menu_btn span{display:block;position:absolute;width:100%;height:2px;border-radius:30px;background:#353535;transition:all .35s;}
input[id="ham_menu"] + .menu_btn span:nth-child(1){top:0;}
input[id="ham_menu"] + .menu_btn span:nth-child(2){top:50%;transform:translateY(-50%);}
input[id="ham_menu"] + .menu_btn span:nth-child(3){bottom:0;}
/* 메뉴 돌리기 */
input[id="ham_menu"]:checked + .menu_btn{z-index:2;}
input[id="ham_menu"]:checked + .menu_btn span:nth-child(1){top:50%;left:50%;transform:translate(-50%, -50%) rotate(135deg);}
input[id="ham_menu"]:checked + .menu_btn span:nth-child(2){left:50%;transform:translate(-50%, -50%) scale(2); opacity:0;}
input[id="ham_menu"]:checked + .menu_btn span:nth-child(3){bottom:50%;left:50%;transform:translate(-50%, 50%) rotate(-135deg);}
/* 사이드 보이기 */
input[id="ham_menu"]:checked + .menu_btn + #gnb{right:0;}
</style>
<input type="checkbox" id="ham_menu" >
<label for="ham_menu" class="menu_btn">
<span></span>
<span></span>
<span></span>
</label>
답변 1
답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
