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개 / 댓글 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>여기에서 수정 하세요.
.mb-sub-ul {display: block !important; background: #333;}해당 처럼 하시면 되시겠지만 CSS 디자인적인 부분을 좀더 수정이 필요하실듯 합니다.
아니면 자바스크립트 수정하시는게 제일 좋은 방법입니다.
답변을 작성하려면 로그인이 필요합니다.