모바일 gnb 오픈 버튼을 터치하면 onclick 이벤트가 실행되자마자 사라집니다. 채택완료
성성
2년 전
조회 1,887
(모바일로 접속해주세요!)
우측 상단의 햄버거 버튼을 터치하면 사이트 메뉴가 노출되어야 하는데, 잠깐 깜빡거렸다 바로 다시 사라집니다.
이쪽 스크립트는 아예 건드리질 않아서 이유를 모르겠습니다ㅠㅠㅠ;
사이트 menu.php를 첨부합니다. 아래 링크 클릭하시면 바로 다운로드됩니다.
언제나 도와주셔서 감사합니다... ㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
2년 전
햄버거버튼을 a 태그가 감싸고 있어서 그렇습니다.
</p>
<p><a href=" ... /main.php"></p>
<p>...</p>
<p><button type="button" onclick="control_mobile_menu();" class="control-mobile-menu txt-default">
<span class="material-icons open">menu</span>
<span class="material-icons close">close</span>
</button></p>
<p>...</p>
<p></a></p>
<p>
간단하게는 다음처럼 확인해볼수 있습니다.
</p>
<p><a href=" ... /main.php#"></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
2년 전
버튼이 a영역 안에 들어가 있네요?? a링크가 작동을 하는 듯 보입니다.
a 링크가 잡혀있어서 링크 이동 하면서 리로드 되는듯 보입니다.
a에 링크를 빼거나 링크 제거가 어려운 경우 클릭시 링크 작동하지 않도록
click 펑션에 return false; 넣어보세요~
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
성성
2년 전
제가 바보같이... head.php에 삽입한 a태그 중 하나를 안 닫았더라고요...ㅠㅠㅠㅠㅠㅠㅠ 답변주신 분들 정말 감사합니다ㅠㅠㅠㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
�
성성
2년 전
같은 소스코드 사용하는 타 사이트에서는 문제없이 작동해서요. open-gnb 클래스명이 포함된 스타일시트 부분을 첨부합니다. ㅠㅠ;
[code]@media all and (max-width:1024px) {
.control-mobile-menu {display:none; position:fixed; top:0; right:0; width:50px; height:50px; font-size:30px; z-index:991;}
.single .control-mobile-menu {display:block;}
body:not(.open-gnb) .control-mobile-menu .close {display:none;}
body.open-gnb .control-mobile-menu .open {display:none;}
#header {display:none !important;}
#mo_header {position:fixed; top:0; left:0; right:0; bottom:0; z-index:990; overflow:auto; opacity:0; visibility:hidden; backdrop-filter: blur(2px); transform:translateY(10%); -webkit-transform:translateY(10%);}
#mo_header > div {display:table; width:100%; height:100%;}
#mo_header > div > div {display:table-cell; vertical-align:middle; text-align:center; padding:30px;}
body.open-gnb #mo_header {opacity:1; visibility:visible; transform:translateY(0); -webkit-transform:translateY(0);}[/code]
[code]@media all and (max-width:1024px) {
.control-mobile-menu {display:none; position:fixed; top:0; right:0; width:50px; height:50px; font-size:30px; z-index:991;}
.single .control-mobile-menu {display:block;}
body:not(.open-gnb) .control-mobile-menu .close {display:none;}
body.open-gnb .control-mobile-menu .open {display:none;}
#header {display:none !important;}
#mo_header {position:fixed; top:0; left:0; right:0; bottom:0; z-index:990; overflow:auto; opacity:0; visibility:hidden; backdrop-filter: blur(2px); transform:translateY(10%); -webkit-transform:translateY(10%);}
#mo_header > div {display:table; width:100%; height:100%;}
#mo_header > div > div {display:table-cell; vertical-align:middle; text-align:center; padding:30px;}
body.open-gnb #mo_header {opacity:1; visibility:visible; transform:translateY(0); -webkit-transform:translateY(0);}[/code]
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인