하위메뉴가 없으면 대메뉴 클릭 시 바로 이동
본문
<nav class="right">
<?php
$i=1;
foreach($menu_datas as $row) {
$cls = "hasDep2";
if(!is_array($row['sub'])) {
$cls = "";
}
?>
<ul>
<li>
<a href="<?php echo $row['me_link']; ?>" ><?php echo $row['me_name'] ?></a>
<ul class="sub_depth sub_depth01" >
<?php
if(!is_array($row['sub'])) {
$i++;
continue;
}
?>
<?php
foreach($row['sub'] AS $row2) {
?>
<li ><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
}
?>
</ul>
</li>
</ul>
<?php
$i++;
}
?>
</nav>
$('.gnb > ul').clone().appendTo('#header .right');
$(window).on('load resize', function(){
var ul = $('#header .gnb > ul > li').eq(0).find('ul').innerHeight();
var headerH = $('#header').innerHeight();
$('#header .gnb > ul').hover(function(){
$('#header').addClass('on');
$('.gnb_bg').height(ul + headerH)
$('#header .gnb > ul > li').children().next().stop().slideDown(700)
}, function(){
$('#header').removeClass('on');
$('.gnb_bg').height(0)
$('#header .gnb > ul > li').children().next().stop().slideUp()
})
})
$('.m_btn .icon').on('click', function(){
$(this).toggleClass('on');
$('.all_gnb').toggleClass('on')
$('.all_gnb').stop().fadeToggle();
if(!$('.all_gnb').hasClass('on')){
$('#header .all_gnb .right > ul > li > a').next().stop().slideUp();
}
})
$('#header .all_gnb .right > ul > li > a').on('click', function(e){
if($(this).next().length !== 0){
e.preventDefault();
$(this).parent().toggleClass('on');
$('#header .all_gnb .right > ul > li > a').not(this).parent().removeClass('on');
$('#header .all_gnb .right > ul > li > a').next().stop().slideUp();
$(this).next().stop().slideToggle();
}
})
메뉴를 클릭하면 바로 아래 하위메뉴가 뿌려지는 부분인데요
하위메뉴가 없을 때 대메뉴만 클릭해도 바로 이동되게 하고 싶어요~
지금은 하위가 있어야만 이동이 되구요
도와주세요~~~디자이너에요~~
답변 2
if구분을 체크해서 count($row['sub'])>0 서브메뉴의 존재여부를 체크해서 대메뉴에 링크를 적용해서 처리되도록 커스텀해야 하는데 해당 부분을 보시고 어려우시다면 개발자에 의뢰하시는게 효율적이실듯 보입니다.
$('#header .all_gnb .right > ul > li > a').on('click', function(e){
if($(this).next().length !== 0){
e.preventDefault();
$(this).parent().toggleClass('on');
$('#header .all_gnb .right > ul > li > a').not(this).parent().removeClass('on');
$('#header .all_gnb .right > ul > li > a').next().stop().slideUp();
$(this).next().stop().slideToggle();
}
})
위 구간에서 해결을 보셔야 한 것 같은데
if문 안으로 alert($(this).next().length); 이렇게 찍어서 하위메뉴가 없는 경우와 있는 경우를 체크하신 다음에
if문의 조건을 바꾸면 될 꺼에요
e.preventDefault();
위 코드 때문에 앵커가 동작하지 않는 것이구요..
답변을 작성하시기 전에 로그인 해주세요.
