메뉴설정시 active class 문제
본문
eyekiss 님께서 올리라고 하셔서 다시 올립니다.
영카트 어드민 메뉴설정 시
shop.head.php 부분 리메이크 중입니다.
그림으로 설명드릴께요 ~! 디자인부분이라 그편이 빠르겠죠. . .
css에서 .active가 적용되면 이렇게 보여야 합니다.
메뉴가 현재 사이트url부분을 가르키도록 . . . 디자인 되어 있죠
이건 서브 메뉴 부분이고요 ! 이런식으로 . ..
이건 모바일 화면 .dropdown css 적용부분 메뉴죠 이런식으로 되어야 하지요 ~!
이해 돼시죠 !
밑에 코드는 연구하던거 올립니다.
sub메뉴부분도 css class 설정전이라 많이 꼬여 있습니다. <div></div> 안닫은 거 있을지 모르겠네요 ~!
영카트메뉴라서 상품메뉴설정과 주메뉴설정이 분리되 있어서 복잡합니다.
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="<?=G5_URL ?>/index.php" class="navbar-brand">
<h1><img src="<?=G5_THEME_URL ?>/images/logo.png" alt="<?php echo $config['cf_title']; ?> 메인"></h1>
</a>
</div>
<!--div id="logo">
<a class="navbar-brand" href="<?php echo G5_URL; ?>/">
<h1><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?> 메인"></h1>
</a>
</div-->
<?php include_once(G5_THEME_MSHOP_PATH.'/category.php'); // 분류 ?>
<!--div id="category-full" -->
<div class="collapse navbar-collapse">
<!-- 메뉴 설정 -->
<ul class="nav navbar-nav navbar-right">
<?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++) {
?>
<?php
if($bo_table) {
if(strpos($row['me_link'], 'bo_table='.$bo_table) !== false) {
$active = ' active';
}
} else if(strpos($row['me_link'], $_SERVER['PHP_SELF']) !== false) {
$active = ' true';
}
//if(!$mnum) $mnum = 0;
//$active = $i==$mnum? ' active' : '';
//if($i !=0 && $i !=5 && $i !=6)
echo "<li class='dropdown{$active}'>".PHP_EOL;
//else
// echo "<li class='active'>".PHP_EOL;
?>
<!--li class="dropdown active"-->
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="">
<?php echo $row['me_name'] ?>
<i class="fa fa-angle-down"></i>
</a>
<ul role="menu" class="sub-menu">
<!--?php
if($i >= 0)
echo '<ul role="menu" class="sub-menu">'.PHP_EOL;
else
echo '<ul>'.PHP_EOL;
?-->
<?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="cate-ul-2" style="margin:0; padding:0;">'.PHP_EOL;
?>
<!--li class="cate-li-2" style=""-->
<?php
if(!$sub) $sub = 0;
$active_2 = $k==$sub? ' active' : '';
if($k !=0 && $k !=2 && $k !=3)
echo "<li class='drop{$active_2}'>".PHP_EOL;
else
echo "<li class='$active_2'>".PHP_EOL;
?>
<a href="<?php echo $row2['me_link']; ?>?sub=<?=$k?>" target="_<?php echo $row2['me_target']; ?>" class="">
<?php echo $row2['me_name'] ?>
</a>
</li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</ul>
</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>
<!-- 메뉴 설정 end -->
</div>
<div>
<?php
$mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
$mshop_ca_res1 = sql_query(get_mshop_category('', 2));
for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
if($i == 0)
echo '<ul class="nav navbar-nav navbar-right">'.PHP_EOL;
?>
<?php
if($i > 0)
echo '<li>'.PHP_EOL;
else
echo '<li class="dropdown">'.PHP_EOL;
?>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>"><?php echo get_text($mshop_ca_row1['ca_name']); ?><i class="fa fa-angle-down"></i></a>
<!--add role menu -->
<?php
if($i > 0)
echo '<ul>'.PHP_EOL;
else
echo '<ul role="menu" class="sub-menu">'.PHP_EOL;
?>
<?php
$mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));
for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
if($j == 0)
echo '<ul class="cate-ul-2" style="margin:0;padding:0;">'.PHP_EOL;
?>
<li class="cate-li-2">
<a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>">
<?php echo get_text($mshop_ca_row2['ca_name']); ?>
</a>
<?php
$mshop_ca_res3 = sql_query(get_mshop_category($mshop_ca_row2['ca_id'], 6));
for($k=0; $mshop_ca_row3=sql_fetch_array($mshop_ca_res3); $k++) {
if($k == 0)
echo '<ul class="cate-ul-3">'.PHP_EOL;
?>
<li class="cate-li-3">
<a href="<?php echo $mshop_ca_href.$mshop_ca_row3['ca_id']; ?>"><?php echo get_text($mshop_ca_row3['ca_name']); ?></a>
<?php
$mshop_ca_res4 = sql_query(get_mshop_category($mshop_ca_row3['ca_id'], 8));
for($m=0; $mshop_ca_row4=sql_fetch_array($mshop_ca_res4); $m++) {
if($m == 0)
echo '<ul class="cate-ul-4">'.PHP_EOL;
?>
<li class="cate-li-4">
<a href="<?php echo $mshop_ca_href.$mshop_ca_row4['ca_id']; ?>"><?php echo get_text($mshop_ca_row4['ca_name']); ?></a>
<?php
$mshop_ca_res5 = sql_query(get_mshop_category($mshop_ca_row4['ca_id'], 10));
for($n=0; $mshop_ca_row5=sql_fetch_array($mshop_ca_res5); $n++) {
if($n == 0)
echo '<ul class="cate-ul-5">'.PHP_EOL;
?>
<li class="cate-li-5">
<a href="<?php echo $mshop_ca_href.$mshop_ca_row5['ca_id']; ?>"><?php echo get_text($mshop_ca_row5['ca_name']); ?></a>
</li>
<?php
}
if($n > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($m > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if($j > 0)
echo '</ul>'.PHP_EOL;
?>
</ul>
<!--add role menu end -->
</li>
<?php
}
if($i > 0)
echo '</ul>'.PHP_EOL;
else
echo '<p>등록된 분류가 없습니다.</p>'.PHP_EOL;
?>
</div>
<div class="search">
<button type="button" id="hd_sch_open">검색<span class="sound_only"> 열기</span> </button>
<!--search -->
<form role="form" id="formsearch" name="frmsearch1" action="<?php echo G5_SHOP_URL; ?>/search.php" onsubmit="return search_submit(this);">
<i class="fa fa-search"></i>
<aside id="hd_sch">
<div class="sch_inner">
<h2>상품 검색</h2>
<label for="sch_str" class="sound_only">상품명<strong class="sound_only"> 필수</strong></label>
<input type="text" name="q" value="<?php echo stripslashes(get_text(get_search_string($q))); ?>" id="sch_str" required class="frm_input">
<input type="submit" value="검색" class="btn_submit">
<button type="button" class="pop_close"><span class="sound_only">검색 </span>닫기</button>
</div>
</aside>
</form>
<script>
$(function (){
var $hd_sch = $("#hd_sch");
$("#hd_sch_open").click(function(){
$hd_sch.css("display","block");
});
$("#hd_sch .pop_close").click(function(){
$hd_sch.css("display","none");
});
});
function search_submit(f) {
if (f.q.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.q.select();
f.q.focus();
return false;
}
return true;
}
</script>
</div>
</div>
답변 2
중간에 서브 메뉴 나오는 부분 수정했습니다.
<!--li class="cate-li-2" style=""-->
<?php
$active_2 = "";
if($bo_table) {
if(strpos($row2['me_link'], 'bo_table='.$bo_table) !== false) {
$active_2 = ' active';
}
} else if(strpos($row2['me_link'], $_SERVER['PHP_SELF']) !== false) {
$active_2 = ' true';
}
if($k !=0 && $k !=2 && $k !=3)
echo "<li class='drop{$active_2}'>".PHP_EOL;
else
echo "<li class='$active_2'>".PHP_EOL;
?>
예 고쳤습니다.
문제는 만드신 주메뉴 수정시...
if($bo_table) {
if(strpos($row2['me_link'], 'bo_table='.$bo_table) !== false) {
$active = ' active';
}
} else if(strpos($row2['me_link'], $_SERVER['PHP_SELF']) !== false) {6
$active = ' active';
}
이코드가
주메뉴 active 시 색깔이 다바뀌어 버립니다. 위 그림처첨 보입니다.
blog 메뉴 active시 아래처럼 보인다는게 문제 busi 메뉴와 home 메뉴는 눌러도 색갈 반응이 없습니다.
변수 선언하는 부분 추가해보세요.
$active = '';
if($bo_table) {
if(strpos($row['me_link'], 'bo_table='.$bo_table) !== false) {
$active = ' active';
}
} else if(strpos($row['me_link'], $_SERVER['PHP_SELF']) !== false) {
$active = ' true';
}
이렇게 수정했더니 동작하네요 ~!
true 를 active로 설정했더니 바뀌는군요
이 문제로 몇일동안 끙끙 거렸습니다.
갑사합니다.
제게 php는 수학문제 풀이 같네요
디자이너의 한계지요
좀더 열심히 연구하고 질문하고 해야할 것 같습니다.
다음에 또 뵈요 ~!
$active = '';
if($bo_table) {
if(strpos($row['me_link'], 'bo_table='.$bo_table) !== false) {
$active = ' active';
}
} else if(strpos($row['me_link'], $_SERVER['PHP_SELF']) !== false) {
$active = ' active';
}
echo "<li class='dropdown{$active}'>".PHP_EOL;
?>
