메뉴 네비게이션 도와주세요 ㅠㅠ
본문
보시면 마우스 오버시 서브메뉴가 나와야 하는데
클릭을 해야만 서브메뉴가 나옵니다ㅠ
.navbar-nav, .navbar-nav ul, .navbar-nav li, .navbar-nav ul li {
margin:0;
padding:0;
}
.navbar-nav:before, .navbar-nav:after, .navbar-nav>ul:before, .navbar-nav> ul:after{
content:'';
display:block;
clear:both;
}
/*전체 사이즈 및 윗부분 여백제어*/
.navbar-default {
width: auto;
height: 90px;
margin: auto;
background: #000;
background: rgba(0,0,0,0.5);
border: none;
}
/*로고*/
.navbar-default .navbar-brand {
color: #fff;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
padding: 32px 0 0 32px;
opacity: 0.85;
margin-right:30px;
}
.navbar-default .navbar-brand { /*추가. 마우스 오버시 색상 변화없이*/
color: #fff !important;
}
/*메인메뉴 영역*/
.navbar-default .navbar-nav .menu {
margin:auto;
padding-top: 20px;
margin-top: 10px ;
width:auto;
height: 78px;
text-align: center;
position:relative;
}
/*메인메뉴 영역제어*/
.navbar-default .navbar-nav .menu a {
float:left;
width: 160px;
font-size: 17px;
color: #fff;
font-weight:bold;
opacity: 0.85;
}
/*메인메뉴 부분제어*/
.navbar-default .navbar-nav .menu a:hover {
color:#fff;
}
/*메인메뉴 마우스오버시 서브메뉴*/
.navbar-default .navbar-nav .menu a:hover .smenu {
display:block;
width: 150px;
height: 25px;
position: absolute;
top: 30px;
}
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a href="<? echo G5_URL ?>" class="navbar-brand"><!--<img src="<? echo G5_THEME_IMG_URL; ?>/logo.png" style="width:100%;">-->김사부왕족발</a>
</div>
<ul class="nav navbar-nav">
$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 값 설정용
// 드롭다운 여부 확인 쿼리
$sql2 = " select count(*) as cnt
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 ";
$row2 = sql_fetch($sql2);
$add_a_class = '';
$add_a_icon = '';
if($row2['cnt']){
$add_li_class = ' class="dropdown"';
$add_a_class = ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"';
$add_a_icon = ' <i class="fa fa-caret-down"></i>';
}
?>
<li class="menu" <?php echo $add_li_class; ?>>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"<?php echo $add_a_class; ?>><?php echo $row['me_name'] ?></a>
<?php
$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);
if($k == 0)
echo '<ul class="dropdown-menu" role="menu">'.PHP_EOL;
?>
<li class="smenu"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
}
echo '</ul>'.PHP_EOL;
?>
<?php
}
?> <style type="text/css">
/* 메뉴가 없는 경우 중앙 정렬 */
.navbar-nav, .navbar-nav > li { float:none; text-align:center; }
</style>
<?php
$add_url = '#';
if ($is_admin) {
$add_url = G5_ADMIN_URL.'/menu_list.php';
$add_msg = '<br /><b class="text-danger">관리자모드 > 환경설정 > 메뉴설정</b>에서 설정하실 수 있습니다.';
}
?>
<a href="<?php echo $add_url; ?>" class="kor">
메뉴 준비 중입니다. <?php echo $add_msg ?>
</a>
</li>
<?php } ?>
</div>
</div>
답변 4
부트스트랩 적용된 테마인데 사용하실때 부트스트랩도 같이 공부해주셔야지 원활하게 사용가능하세요..
위에 소스에서 보면
if($row2['cnt']){
$add_li_class = ' class="dropdown"';
$add_a_class = ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"';
$add_a_icon = ' <i class="fa fa-caret-down"></i>';
}
일단 이부분을
if($row2['cnt']){
$add_li_class = ' class="dropdown"';
$add_a_class = ' class="dropdown-toggle" data-toggle="dropdown"';
$add_a_icon = ' <i class="fa fa-caret-down"></i>';
}
이렇게 바꾸시구요 스크립트 추가해줘보세용
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
그리구 여담인데 사이트 실행시키면 오류가 5개 뜨자나요 이거부터 일단 다 찾아서 콘솔에 아무것도 안뜨게 하시고 작업하시는게 좋아유..
그리구
<li class="menu" <?php echo $add_li_class; ?>>
이부분에 앞에 class는 꼭필요한거아니면 id로 바꿔주시든가 없애시는게..
뒤에 함수로 class 자체를 받아오니까요..
고맙습니다ㅜ 부트스트랩도 공부도 해야하는데 만드는게 급하다보니ㅠ
<script>
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
이렇게 넣어주란 말씀이시죠?
이 스크립트를 어디에다가 넣어주면 되나요?
<li class="menu" <?php echo $add_li_class; ?>> <-요부분은
id로 바꾸어 주었습니다// 따로 주지 않으면 메인메뉴에 적용한게 서브메뉴에도 같이 적용되어서
어쩔수 없이 사용은 해야할거 같습니다 ㅠㅠ
쿠웰렐님 넘나 감사합니다~//
자바스크립트 onclick 이벤트입니다.
<script>
window.onclick..............
</script>
이거 찾아서 지우세요.
그다음 마우스오버 css 손보면 될듯하네요.
아무리 찾아도 없네요ㅠ 보통 그누보드 설치파일 어디에 저 소스가 들어있는지 알수있을까요?
아니면 css에서나 저 스크립트를 무시할수 있는 용어가 있을까요?
그냥 위에 소스가 있는 파일에
스크립트로 감싸셔서 올리시면되요~~~~
<script>
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
넣어봐도 안되네요ㅜㅜ
오잉.. zes님 제작중이신 싸이트보니까 아직 대메뉴 li 클레스가 2개에요~
<li class="menu" class="dropdown"> <a href="http://zest86.hubweb.net/b2/bbs/content.php?co_id=company" target="_self" class="dropdown-toggle" data-toggle="dropdown">브랜드스토리</a> <ul> <li id="smenu"><a href="http://zest86.hubweb.net/b2/bbs/content.php?co_id=company" target="_self">소개</a></li> <li id="smenu"><a href="http://zest86.hubweb.net/b2/bbs/content.php?co_id=sub1_2" target="_self">찾아오시는길</a></li> </ul>
요기서 아직 대메뉴 감싸고있는 li에 클래스가 2개여서그래요 앞에 클레스 아이디로 변경해주세요
<li id="menu" class="dropdown"><a href="http://zest86.hubweb.net/b2/bbs/content.php?co_id=company" target="_self" class="dropdown-toggle" data-toggle="dropdown">브랜드스토리</a><ul><li id="smenu"><a href="http://zest86.hubweb.net/b2/bbs/content.php?co_id=company" target="_self">소개</a></li><li id="smenu"><a href="http://zest86.hubweb.net/b2/bbs/content.php?co_id=sub1_2" target="_self">찾아오시는길</a></li></ul>
id로 바꿔도 그러네요 ㅠㅠ 메뉴자체가 <?php 요거로 되어있어요~
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<?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 값 설정용
for ($i=0; $row=sql_fetch_array($result); $i++) {
// 드롭다운 여부 확인 쿼리
$sql2 = " select count(*) as cnt
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 ";
$row2 = sql_fetch($sql2);
$add_li_class = '';
$add_a_class = '';
$add_a_icon = '';
if($row2['cnt']){
$add_li_class = ' class="dropdown"';
$add_a_class = ' class="dropdown-toggle" data-toggle="dropdown"';
$add_a_icon = ' <i class="fa fa-caret-down"></i>';
}
?>
<li id="menu" <?php echo $add_li_class; ?>>
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"<?php echo $add_a_class; ?>><?php echo $row['me_name'] ?></a>
<?php
$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++) {
if($k == 0)
echo '<ul class="dropdown-menu" role="menu">'.PHP_EOL;
?>
<li id="smenu"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
<?php
}
if ($i == 0) {
?> <style type="text/css">
/* 메뉴가 없는 경우 중앙 정렬 */
.navbar-nav, .navbar-nav > li { float:none; text-align:center; }
</style>
<li>
<?php
$add_url = '#';
if ($is_admin) {
$add_url = G5_ADMIN_URL.'/menu_list.php';
$add_msg = '<br /><b class="text-danger">관리자모드 > 환경설정 > 메뉴설정</b>에서 설정하실 수 있습니다.';
}
?>
<a href="<?php echo $add_url; ?>" class="kor">
메뉴 준비 중입니다. <?php echo $add_msg ?>
</a>
</li>
<?php } ?>
</ul>
</div>
