드랍다운메뉴 질문.... 채택완료
https://www.aptners.com/homepage/
해당 페이지에 메뉴에 마우스오버했을때 스르륵 드랍다운메뉴가 열리게 하고싶은데
스크립트 작성해서 보니 뭐가 문제인지는 모르겠지만 서브메뉴 숨김처리까지만 되고 스르륵 열리진 않네요 ..
뭐가 문제였을까요 ㅠㅠ.. 도움 부탁드립니다 !
답변 2개
스크립트와 html 부분을 올려주세요.
열림과 닫힘구문을 반대로 사용해서 그런경우도 있고. 코드자체가 틀리게 입력되어 있을수도 있습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
소스코드입니다 !
</strong></p>
<p><nav class="fixed-top navbar-expand-lg fixed-top">
<div class="container">
<div class="row mt-3 mb-3">
<a class="m-auto " href="<?php echo G5_URL?>" class="logo"><img src="<?php echo G5_THEME_URL?>/img/logo_wh.png"></a>
<!--button class="navbar-toggler navbar-dark navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button-->
</div>
<div class="row" id="nav">
<div class="col-md-12 pr-0 pl-0" id="mainNav"></p>
<p> <div class="collapse navbar-collapse">
<ul class="navbar-nav w-100" >
<?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;</p>
<p> $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;
?>
<?php if($row['sub']['0']) { ?>
<li class="nav-item col-md-3 text-center p-0">
<a class="nav-link pr-1 pl-1 dropdown-toggle ks4 f16" href="<?php echo $row['me_link']; ?>" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" target="_<?php echo $row['me_target']; ?>">
<?php echo $row['me_name'] ?>
</a>
<!-- 서브 -->
<!--ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<?php
// 하위 분류
$k = 0;
foreach( (array) $row['sub'] as $row2 ){</p>
<p> if( empty($row2) ) continue; </p>
<p> ?>
<a class="dropdown-item ks4 f15 fw4" href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></p>
<p> <?php
$k++;
} //end foreach $row2</p>
<p> if($k > 0)
echo '</ul>'.PHP_EOL;
?>-->
<?php }else{?>
<li class="nav-item">
<a class="nav-link en2 f16" href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a>
</li>
<?php }?>
</li></p>
<p> <?php
$i++;
} //end foreach $row</p>
<p> 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 } ?>
<li class="nav-item dropdown login">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
LOGIN
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<?php if($is_admin) { ?><a class="dropdown-item" href="<?php echo G5_URL?>/adm">관리자</a><?php } ?>
<a class="dropdown-item" href="<?php echo G5_URL?>/bbs/new.php">새글</a>
<a class="dropdown-item" href="<?php echo G5_URL?>/bbs/qalist.php">1:1문의</a>
<?php if($is_member) { ?>
<a class="dropdown-item" href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a>
<a class="dropdown-item" href="<?php echo G5_URL?>/bbs/logout.php">로그아웃</a>
<?php }else{ ?>
<a class="dropdown-item" href="<?php echo G5_URL?>/bbs/login.php">로그인</a>
<a class="dropdown-item" href="<?php echo G5_URL?>/bbs/register.php">회원가입</a>
<?php } ?>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class=" position-relative bg-white w-100" id="dropdownSub">
<div class="container" id="subMenu"></p>
<p> <div class="row">
<div class="dropdown_menu w-100 bg-white d-inline-block pb-3 pt-3">
<ul class="col-md-3 text-center float-left mb-0 p-0">
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
</ul>
<ul class="col-md-3 text-center float-left mb-0 p-0">
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
</ul>
<ul class="col-md-3 text-center float-left mb-0 p-0">
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
</ul>
<ul class="col-md-3 text-center float-left mb-0 p-0">
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
<li href="#;" class="p-1 d-block">
<a href="#;" class="d-inline-block">1</a>
</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</nav>
</p>
<p><strong>
<script>
$(function(){
$('#dropdownSub').hide();
$('#mainNav').hover(function(){
$(this).parent().find('#dropdownSub').slideDown();
$(this).parent().hover(function(){
},function(){
$(this).parent().find('#dropdownSub').slideUp(900);
})
});
});
</script>
답변에 대한 댓글 1개
<script>
$('#dropdownSub').hide();
$(document).ready(function ()
{
$('#mainNav').hover(function(){
$(this).parent('div#dropdownSub').slideDown();
}, function() {
$(this).parent('div#dropdownSub').slideUp(900);
});
});
</script>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인