ATSTORE 반응형01 테마에서 모바일 상위메뉴 클릭하게 할려고 하면 어떻게 해야하나요?
본문
PC에서는 단일메뉴 서브메뉴가 정상적인 동작을 하는데
모바일 버전 펼침 메뉴에서
그런데 서브메뉴가 없는 단일메뉴는 클릭 조차 안됩니다!
즉 모바일에서 상위메뉴 하이퍼 링크 자체가 안됩니다.
그 테마 리풀도 전부다 읽어 보았는데 문의는 많으나 답이 없더군요...
headStyle.css를 삭제하니 레이아웃이 엉망이 되지만 그래도 상위메뉴 하이퍼 링크는 작동됩니다.
/*headStyle.css*/
.dark-mode { background:#333; }
.dark-mode h1, h2 , h3, p { color:#fff; }
.dark-mode p,
.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
background-color:#c71526;
color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
background-color:#c71526;
color:#ee1e
}
button { background:#c71526; }
#darkLight {
width:70px; height:90px;
font-size:3em;
padding-left:0.5%;
position:fixed;
right:0; bottom:3%;
border-radius:100px 0 0 100px;
transition:all .3s;
z-index:99999;
}
#darkLight:hover {
width:130px;
padding-left:1%;
background-color:#111;
}
#hd{width: 100%; border-bottom: 1px solid rgba(255,255,255,0.2);}
#hd_wrapper{height: 100%; }
#logo{position: absolute; width: 82px; height: 55px; left: 20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10;}
#logo img{width: 100%;}
#gnb{position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 50%;}
#gnb .gnb_1dli{line-height: 90px; width: 20%; text-align: center;}
.hd_login { width:20%; overflow: hidden; position:fixed; right:5%; top:35%; z-index:999999;}
.hd_login a {float:left; margin:0 5%; color:#fff; }
.gnb_1da{width: 100%; color: #fff; font-weight: 400;}
.gnb_1dli .bg{display: none;}
.gnb_2dul{top: 90px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; background: rgba(0,0,0,0.7);}
.gnb_1dli_over .gnb_2dul{left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0,0,0,0.7);}
#nav_bar{height: 3px; background: #fff; position: absolute; bottom: 0;}
.gnb_2dli{border: none;}
.gnb_2da{color: #fff; text-align: center; font-weight: 300;}
a.gnb_2da:hover{background-color: #c80e21;}
#tnb{ border-bottom: none; background: none; width: 1200px; height: 90px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#tnb ul{min-width: inherit; width: 100%;}
#tnb li{position: absolute; width: 40px; height: 40px; font-size: 1.0em; border-left: none; z-index: 10;}
#tnb li a{width: 100%; height: 100%; text-indent: -9999px; overflow: hidden;}
#tnb li .fa{display: none;}
#tnb .tnb_admin a{color: #d40424;}
#tnb a:hover{background: none; color: #333;}
#tnb .tnb_admin a:hover{color: #d40424;}
#tnb li.register{background: url(../../img/common/register_icon1.png) center no-repeat; position: absolute; top: 50%; right: 70px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: 100%;}
#tnb li.join{display: none;}
#tnb li.tnb_admin{display: none;}
#tnb li.login{background: url(../../img/common/login_icon2.png) center no-repeat; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: 100%;}
#tnb li.logout{background: url(../../img/common/logout_icon2.png) center no-repeat; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-size: 100%;}
#aside{position: fixed;right: -100%; top: 0px; bottom: 0; margin: 0px;width: 80%; border-top: 0;z-index: 1005;overflow-y: auto;background:#223040;border: 0;}
.close_menu {position: fixed;z-index: 1100; top: 20px; right: -100%; width: 35px; height: 35px;}
.close_menu span {position:absolute; left:0; display:block; width:100%; height:2px; background:#fff; -webkit-transition:all .4s ease; transition:all .4s ease; }
.close_menu .close-line1 {top:17px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
.close_menu .close-line2 {top:17px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}
.mask {display: none;position: fixed;top: 0;right: 0;width: 100%;height: 100%;background: #000;opacity: .7;cursor: pointer; z-index: 1000;}
.mb-sub-ul {display: none; background: #333;}
.mb-sub-ul li a {display: block; font-size: 16px; font-weight: 100; padding: 15px 0;}
.mobile_menu{position: absolute; width: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.mobile_menu ul{width: 100%; overflow: hidden;}
.mobile-list {width: 100%;}
.mobile-list a {padding: 20px 0; width: 100%; color: #fff; text-transform: uppercase;font-size: 13px; text-align: center; font-size: 18px; font-weight: normal;}
#mb-open-menu{position: absolute;right: 20px;top: 50%;-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%);width: 26px;height: 16px;cursor: pointer;z-index: 10;}
#mb-open-menu span {position: absolute;left: 0;display: block;width: 100%;height: 1px;background: #fff;-webkit-transition: all .4s ease;transition: all .4s ease;}
#mb-open-menu .line1 {top: 0px;}
#mb-open-menu .line2 {top: 7px;}
#mb-open-menu .line3 {bottom: 0;}
@media all and (max-width:1200px){
#hd_wrapper{width: 100%;}
}
@media all and (max-width:1199px){
#tnb{width: 100%;}
}
@media all and (min-width:1025px){
#hd{height: 90px; z-index: 10; position: fixed; top: 0; min-width: none; width: 100%; }
#hd_wrapper{background: rgba(255,255,255,0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
#hd.scrollBg #hd_wrapper{background: rgba(255,255,255,1); -webkit-box-shadow: -2px 6px 16px 0px rgba(0,0,0,0.26); box-shadow: -2px 6px 16px 0px rgba(0,0,0,0.26);}
#hd_wrapper{position: absolute; width: 100%; height: 90px;}
#hd_wrapper .inner{height: 90px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#hd.scrollBg .gnb_1da{color: #000;}
#hd.scrollBg #tnb li.login{background-image: url(../../img/common/login_icon1.png);}
#hd.scrollBg #tnb li.logout{background-image: url(../../img/common/logout_icon1.png);}
#hd.scrollBg #tnb li.register{background-image: url(../../img/common/register_icon2.png);}
#gnb{width: 700px;}
.logo_pc{display: block;}
.logo_mobile{display: none;}
#aside{display: none;}
#gnb{display: block;}
.close_menu{display: none;}
#mb-open-menu{display: none;}
#hd.scrollBg #nav_bar{background: #c80e21; bottom: -1px;}
}
@media all and (max-width:1024px){
#hd{width: 100%; display: block; height: 60px;}
#hd_wrapper{width: 100%;}
#tnb{width: 100%; left: 0; -webkit-transform: none; -ms-transform: none; transform: none; height: 60px;}
#tnb li{width: 35px; height: auto;}
#tnb li.login, #tnb li.register{right: inherit; left: 20px;}
#tnb li.logout{right: inherit; left: 70px;}
#tnb li{height: 40px; line-height: 40px;}
#gnb{display: none;}
#logo{width: 40px; height: 26px; left: 50%; margin-left: -20px;}
.logo_mobile{display: block;}
.logo_pc{display: none;}
#aside{display: block; z-index: 2000;}
}
@media all and (max-width:980px){
.hd_login {
width: 20%;
overflow: hidden;
position: absolute;
right: 5%;
top: 35%;
}
}
@media all and (max-width:600px){
.hd_login { display: none; }
#aside{width: 100%;}
#tnb li{width: 28px; height: auto;}
#tnb a{padding: 0;}
#tnb li.logout{right: inherit; left: 56px;}
}
아무리 해도 답이 없습니다..ㅜ..ㅜ
혹시 해결 하신분 있을까요?
답변 5
tail.php에서
<div id="aside">
<div class="close_menu" id="mobile_menu_close">
<span class="close-line1"></span>
<span class="close-line2"></span>
</div>
<div class="mobile_menu">
<ul>
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$menu_datas = array();
for ($i=0; $row=sql_fetch_array($result); $i++) {
$menu_datas[$i] = $row;
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
$menu_datas[$i]['sub'][$k] = $row2;
}
}
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
?>
<li class="mobile-list">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<ul class="mb-sub-ul">'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</div>
</div>
<div class="mask"></div>
<script type="text/javascript">
$( document ).ready(function(){
$(function () {
$('.mobile_menu > ul > li > a').click(function () {
$( this ).parent().find('ul').slideToggle();
$(this).parent().siblings().children().next().slideUp();
// return false;
});
$('.mobile_menu > ul > li > a').bind('touchstart', function (e) {
// $(this).trigger('click');
// e.preventDefault();
});
});
$( "#mb-open-menu" ).click(function(){
$( "#aside" ).animate({"right":"0px"}, 200);
$( ".mask" ).css('display','block');
$( ".close_menu" ).animate({"right":"20px"}, 200);
$("body").css("position","fixed");
});
$( "#mobile_menu_close, .mask" ).click(function(){
$( "#aside" ).animate({"right":"-100%"}, 200);
$( ".close_menu" ).animate({"right":"-100%"}, 200);
$( ".mask" ).css('display','none');
$("body").css("position","relative");
});
});
</script>
여기에서 수정 하세요.
감사합니다..바로 테스트 해보겠습니다.
너무 감사드립니다.ㅜ..ㅜ 바로 해결되였습니다..정말 감사드립니다.
채택 감사 합니다.
css 파일은 함부로 지우면안됩니다. 문제 되는 부분만 찾아 수정을 해줘야합니다.
css 에서 문제 점을 못찾는다면 JavaScript 스크립트 쪽도 확인해보셔야합니다.
그리고
테마 스킨 경로가 어떻게 되죠? 테스트 해드리겠습니다.
자바스크립트 문제일 확률이 높습니다.
저도 자바스크립트 문제라고 생각해서 아무리 고쳐도 안되더군요...
혹시나 싶어서 CSS를 변경 변경이 되여서 문의 드리는것였습니다.
.mb-sub-ul {display: block !important; background: #333;}
해당 처럼 하시면 되시겠지만 CSS 디자인적인 부분을 좀더 수정이 필요하실듯 합니다.
아니면 자바스크립트 수정하시는게 제일 좋은 방법입니다.
너무 감사합니다.테스트 해보겠습니다.
잘되던 기능이 작동을 하지 않는다면 F12 누르셔서 콘솔탭에서 사전 오류가 있는지 채크해보세요.
