사이드메뉴 클릭시 메뉴 글자색 빨간색으로 변화 주기
관련링크
본문
이럭저력 고수님들의 도움으로 사이드메뉴(3차메뉴)까지 구현 성공 하였으니.
링크 주소와 같이 해당메뉴를 클릭하면 빨간으로 변화 주고 싶은데 제 머리론 힘든것 같습니다.
현재사용되고 있는 소스 다름과 같습니다.
어디를 수정해야 할지 아니면 추가를 해야 할지 고수님의 조언 부탁 드립니다.
<?php
if (!defined('_GNUBOARD_')) exit;
if($bo_table){
$menu_url = G5_URL."/bbs/board.php?bo_table=".$bo_table;
}else{
$menu_url = G5_URL.$_SERVER['REQUEST_URI'];
}
$menu = sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and me_link = '$menu_url' ");
$me_code = substr($menu['me_code'],0,2);
?>
<script type="text/javascript">
function display_submenu(num) {
document.getElementById("mysub"+num).style.display="block";
}
</script>
<script>
// 지우지 말아주세요. 새창 등에서도 사용합니다.
$(document).ready(function() {
$("#mysubmenu a").on("click", function(e){ //링크 클릭시
var $data_midtxt = $(this).attr("data-midtxt");
if( $data_midtxt ){
$.cookie('sub_midtxt', $data_midtxt, { path: '/' });
} else {
$.cookie('sub_midtxt', null, { path: '/' });
}
});
});
</script>
<style>
#mysubmenu {border: 1px solid #d2d9e6; border-bottom: 1px solid #c1ccda;margin:0px 15px 15px;background:#fff;position:relative;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow:0 1px 2px rgba(0,0,0,0.1)}
#mysubmenu ul {list-style:none; margin:0; padding:0;}
#mysubmenu li { margin: 0; list-style: none;}
#mysubmenu li.leftmenu_b {line-height:35px; margin-top:0px; padding:5px 0 3px 35px; border-bottom:0px solid #dddddd; text-align:left; font-size:14pt; font-weight:bold; background:#d1d1d1; }
#mysubmenu li.leftmenu_b a{ color:#F70303; }
#mysubmenu li.leftmenu_s {line-height:33px; margin-bottom:0px; padding-left:35px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#fff; color:#333; }
#mysubmenu li.leftmenu_s:hover { background:#fff;color:#F40B6E; }
#mysubmenu li.leftmenu_s_on {line-height:33px; margin-bottom:0px; padding-left:35px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#5aacca; color:#C3E4F1; }
#mysubmenu li.leftmenu_s_on a{ color:#C3E4F1; }
#mysubmenu li.leftmenu_s a:focus, #mysubmenu li.leftmenu_s a:hover { color:#fff;color:#F40B6E;}
#mysubmenu li.leftmenu_c {line-height:33px; margin-bottom:0px; padding-left:15px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#fff; color:#333; }
#mysubmenu li.leftmenu_c:hover { background:#fff;color:#F40B6E; }
#mysubmenu li.leftmenu_c_on {line-height:33px; margin-bottom:0px; padding-left:35px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#5aacca; color:#C3E4F1; }
#mysubmenu li.leftmenu_c_on a{ color:#C3E4F1; }
#mysubmenu li.leftmenu_c a:focus, #mysubmenu li.leftmenu_s a:hover { color:#fff;color:#F40B6E;}
</style>
<div id="mysubmenu">
<?php
$tmp_code = substr($me_code,0,2);
$tmp_menu_name=sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and length(me_code) = '2' and me_code = '$tmp_code' ");
?>
<li class="leftmenu_b"><font color=#F70303><h3><?=$tmp_menu_name['me_name']?></h3></font>
<li>
<?
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '$tmp_code'
order by me_order,me_code, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<ul class="snb_2dul">'.PHP_EOL;
?>
<li class="leftmenu_s">
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="leftmenu_s <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"><?php echo $row2['me_name'] ?></a>
<?php
//3차메뉴 불러 오기.
$sql3 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '6'
and substring(me_code, 1, 4) = '{$row2['me_code']}'
order by me_order,me_code, me_id ";
$result3 = sql_query($sql3);
$num3 = sql_num_rows($result3);
if($num3>0){
echo '<ul class="snb_3dul">'.PHP_EOL;
while($row3=sql_fetch_array($result3)){
?>
<li class="leftmenu_c">
<a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>" class="leftmenu_c <?php if($row3['me_code']==$me_code) { echo "on2"; }?>">-<?php echo $row3['me_name'] ?></a>
</li>
<?php
}
echo '</ul>'.PHP_EOL;
}
echo '</li>'.PHP_EOL;
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</div>
답변 3
class="leftmenu_s <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"
==>>
class="leftmenu_s_<?php if($row2['me_code']==substr($me_code,0,4)) { echo 'on'; }?>"
감사합니다.
언더바가 문제 있었군요
사이드메뉴 클릭시 빨간색 유지가 안되네요
#mysubmenu li.leftmenu_s_on
=> li 제거
#mysubmenu .leftmenu_s_on
조건이 맞는지 확인이 필요합니다.
if($row2['me_code']==substr($me_code,0,4))
<div id="mysubmenu">
<?php
$tmp_code = substr($me_code, 0, 2);
$tmp_menu_name = sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and length(me_code) = '2' and me_code = '$tmp_code' ");
?>
<li class="leftmenu_b"><font color=#F70303><h3><?= $tmp_menu_name['me_name'] ?></h3></font>
<li>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '$tmp_code'
order by me_order, me_code, me_id ";
$result2 = sql_query($sql2);
for ($k = 0; $row2 = sql_fetch_array($result2); $k++) {
if ($k == 0)
echo '<ul class="snb_2dul">' . PHP_EOL;
?>
<li class="leftmenu_s_<?php if ($row2['me_code'] == substr($me_code, 0, 4)) {
echo "on";
} ?>">
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="leftmenu_s"><?php echo $row2['me_name'] ?></a>
<?php
// 3차메뉴 불러 오기.
$sql3 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '6'
and substring(me_code, 1, 4) = '{$row2['me_code']}'
order by me_order, me_code, me_id ";
$result3 = sql_query($sql3);
$num3 = sql_num_rows($result3);
if ($num3 > 0) {
echo '<ul class="snb_3dul">' . PHP_EOL;
while ($row3 = sql_fetch_array($result3)) {
?>
<li class="leftmenu_c_<?php if ($row3['me_code'] == $me_code) {
echo "on2";
} ?>">
<a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>"
class="leftmenu_c">-<?php echo $row3['me_name'] ?></a>
</li>
<?php
}
echo '</ul>' . PHP_EOL;
}
echo '</li>' . PHP_EOL;
}
if ($k > 0)
echo '</ul>' . PHP_EOL;
?>
</div>
현재 빨간색으로 나오고 있는것 아닌가요?;;;
상위메뉴
color:#F70303;
하위메뉴
color:#F40B6E;
현재 이렇게 되어있는데요? ;;;--;;;
해당 싸이트 들어 가보세요.
클릭해도 글자 색이 변화 없음.
저도 그렇게 생각 해봤는데 전혀 변화가 없네요. 이상합니다
http://ace.korea505.com
혹시 active라든가 visit 부분이 빠진것 아닐까요
클릭시 했을때 빨간색 유지
그누에서 서브메뉴는 마우스 오버기능 스크립트 처리로 스탑이 않됩니다.
또한 css 에서 처리 또한 않됩니다.
그렇다면
이문제를 해결방법은 없을까요? 있습니다.
에코 처리 된부분에서 직접 스타일을 정의 해 주시면 해결됩니다.
초보라 무슨뜻인지 잘 모르겠습니다.
"에코 처리 된부분에서 직접 스타일을 정의 해 주시면 해결됩니다."
이부분을 어떻게 정의 할까요?
소스좀 올려 주시면 안될까요?
일단 스타일에서 호버처리 해보세요
.snb_3dul:hover {
background-color: #F40B6E;
}
이런식으로 해보시고 만약에 않되시면......
그때는
해당 폰트 직접 처리 해야합니다.
echo " style='color:#F40B6E;'";
또는 백그라운드
echo " style='background-color:#F40B6E;'";
이런식으로 요
하나더 해볼까요?
<a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>" class="leftmenu_c <?php if($row3['me_code'] == $me_code) { echo "on2"; } ?>" style="color: red; text-decoration: underline;">-<?php echo $row3['me_name'] ?></a>
수고 많이 하시는데 잘 안됩니다.
클릭도 안했는데 빨간색 및 밑줄이 생깁니다
===================
일단 스타일에서 호버처리 해보세요
.snb_3dul:hover {
background-color: #F40B6E;
}
이런식으로 해보시고 만약에 않되시면......
그때는
해당 폰트 직접 처리 해야합니다.
echo " style='color:#F40B6E;'";
또는 백그라운드
echo " style='background-color:#F40B6E;'";
이런식으로 요.
다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다.
먼저, 좌측 메뉴 항목에 해당 메뉴를 식별하는 클래스를 추가합니다.
// 좌측 메뉴 항목에 클래스 추가
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="leftmenu_s <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"><?php echo $row2['me_name'] ?></a>
그런 다음, 아래의 JavaScript 코드를 사용하여 선택된 메뉴를 클릭했을 때 좌측 메뉴 항목에 클래스 on을 추가하고, 다른 항목의 on 클래스를 제거하면 될 것 같네요
<script>
$(document).ready(function() {
$("#mysubmenu a").on("click", function(e) {
// 이전에 선택된 메뉴 항목의 'on' 클래스를 제거
$("#mysubmenu a").removeClass("on");
// 현재 클릭한 메뉴 항목에 'on' 클래스 추가
$(this).addClass("on");
var $data_midtxt = $(this).attr("data-midtxt");
if ($data_midtxt) {
$.cookie('sub_midtxt', $data_midtxt, { path: '/' });
} else {
$.cookie('sub_midtxt', null, { path: '/' });
}
});
});
</script>
위소스로 해서 잘 안되는대요
