고수님들 슬라이드 메뉴 소스좀 봐주시면 감사하겠습니다. 채택완료
<?php
$sql = " select *
from {$g5['menu_table']}
where me_mobile_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
for($i=0; $row=sql_fetch_array($result); $i++) {
?>
<li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex--; ?>">
<?php
$submenus = '';
$sql2 = " select *
from {$g5['menu_table']}
where me_mobile_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++) {
if($k == 0)
$submenus .= '<button type="button" class="gnb_op">하위메뉴</button><ul class="gnb_2dul">'.PHP_EOL;
$submenus .= '<li class="gnb_2dli"><a href="'.$row2['me_link'].'" target="_'.$row2['me_target'].'" class="gnb_2da">'.$row2['me_name'].'</a></li>'.PHP_EOL;
}
if($k > 0)
$submenus .= '</ul>'.PHP_EOL;
if($submenus)
$gnb_class = 'gnb_1da gnb_bg';
else
$gnb_class = 'gnb_1da';
?>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="<?php echo $gnb_class; ?>"><?php echo $row['me_name'] ?></a>
<?php echo $submenus; ?>
</li>
<?php
}
if ($i == 0) { ?>
<li id="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하세요.<?php } ?></li>
<?php } ?>
</ul>
</nav>
</div>
<!--
<?php include_once(G5_THEME_MOBILE_PATH.'/head.menu.php'); ?>
-->
</div>
</header>
<script>
jQuery(document).ready(function($) {
$(".smobitrigger").smplmnu();
});
$(function(){
$(".gnb_op").click(function(){
$(this).next().slideToggle(300).siblings(".gnb_2dul").slideUp("slow");
});
$("#wrapper").on("click", function() {
$(".gnb_2dul").fadeOut();
});
});
</script>
민트 테마에 있는 소스를 그대로 가져와서 사용을 하고 있습니다.
현재 제가 생각하기에는 스크립트가
(".gnb_op"). 를 눌렀을 때, (".gnb_2dul"). 가 열려라.
("#wrapper"). 를 눌렀을 때, (".gnb_2dul"). 가 닫혀라.
입니다. 그런데 이 부분을
'gnb_1da' 를 눌렀을 때 (".gnb_2dul"). 가 열려라.
(".gnb_2dul"). 가 열려져 있는 상황에서 'gnb_1da' 를 누르면 (".gnb_2dul"). 가 닫힌다.
("#wrapper"). 를 눌렀을 때도, (".gnb_2dul"). 가 닫혀라.
이렇게 변경하려면 어떻게 손을 봐야 하나요?
답변 1개
</span></p><p><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">$(function(){</span></p><p><br style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">$(".gnb_op, .</span><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">gnb_1da</span><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">").click(function(){</span></p><p><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">if($(".gnb_2dul")</span><span style="color: rgb(52, 73, 94); font-size: 16px; line-height: normal; background-color: rgb(255, 255, 255);">.css("display") == "none"){</span></p><p><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"> $(this).next().slideToggle(300).siblings(".gnb_2dul").slideUp("slow");</span></p><p>}else{</p><p><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"> $(".gnb_2dul").fadeOut();</span> </p><p>}
<span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"> });</span></p><p><br style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"> $("#wrapper").on("click", function() {</span><br style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"> $(".gnb_2dul").fadeOut();</span><br style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"> });</span></p><p> </p><p> </p><p><br style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;"><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">});</span> </p><p><span style="color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; letter-spacing: -0.01px; line-height: 25.2072px;">
테스트는 안해봤습니다.
셀렉터에 여러 엘리먼트를 지정하려면
$(".abc, .def") 이런식으로 구분자를 주시면 됩니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그런데 주신 소스를 적용시켜 봤는데, .gnb_1da를 눌렀는데 하위메뉴가 나오는 것이 아니라 우측에 있는 .gnb_op 버튼이 위로 사라지기만 합니다. 다시 누르면 .gnb_op 버튼이 나오구요...;