사이드메뉴 클릭시 메뉴 글자색 빨간색으로 변화 주기
관련링크
http://ace.korea505.com
118회 연결
본문
이럭저력 고수님들의 도움으로 사이드메뉴(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'; }?>"
현재 빨간색으로 나오고 있는것 아닌가요?;;;
상위메뉴
color:#F70303;
하위메뉴
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>
답변을 작성하시기 전에 로그인 해주세요.