선택한 메뉴 백그라운드 색상 변경
본문
<?php
if($co_id) $sql = " select * from {$g5['menu_table']} where me_link like '%$co_id' and length(me_code) = '4' "; // 페이지
else $sql = " select * from {$g5['menu_table']} where me_link like '%$bo_table' and length(me_code) = '4' "; // 게시판
$row = sql_fetch($sql);
$me_name = $row['me_name']; // 현재 페이지 타이틀
$me_gr_code = substr($row['me_code'],0,2); // 메뉴 그룹 코드
$sql = " select * from {$g5['menu_table']} where me_code = '$me_gr_code' ";
$row = sql_fetch($sql); //결과가 1행일 때
$me_gr_name = $row['me_name']; // 메뉴 그룹 타이틀
?>
<div id="aside">
<dl>
<dt><h3><?php echo $me_gr_name ?></h3></dt>
<?php
$sql = " select * from {$g5['menu_table']} where me_code like '$me_gr_code%' and length(me_code) = '4' order by me_code ";
$result = sql_query($sql);
for ($bi=0; $row=sql_fetch_array($result); $bi++) { // bi 는 board index
?>
<dd><a href="<?php echo $row['me_link'] ?>"><?php echo $row['me_name']?></a></dd>
<?php } ?>
</dl>
</div>
위 코드를 이용해서 사이드 메뉴를 이용중인데요
선택한 메뉴에 따라 background 컬러가 변경되게 할 수 없을까요?
요런식으로용...
!-->답변 3
~~이렇게 하시면 되겠습니다~~
// 20번째 줄.....수정
<dd>
<a href="<?php echo $row['me_link'] ?>" class="_menus_"><?php echo $row['me_name']?></a>
</dd>
<script>
// 백그라운드 변경하는 자바스크립트 추가
window.onload = function(){
var link = window.location.href;
var cMenu = document.getElementsByClassName("_menus_");
for(var i=0; i < cMenu.length; i++){
var url = cMenu[i].href;
if(link != url) continue;
cMenu[i].parentElement.style.background = "#f3f3f3";
break;
}
};
</script>
// 20번째 줄.....수정
<dd>
<a href="<?php echo $row['me_link'] ?>#<?php echo $row['me_name']?>" class="_menus_">
<?php echo $row['me_name']?>
</a>
</dd>
// 백그라운드 변경하는 자바스크립트 추가
<script>
window.onload = function(){
if(!window.location.hash) return;
var menu_name = window.location.hash;
var cMenu = document.getElementsByClassName("_menus_");
for(var i=0; i < cMenu.length; i++){
var url = cMenu[i].href;
var hash = url.substring( url.indexOf('#')+1 );
if(hash !== menu_name) continue;
//선택된 메뉴의 색상변경
cMenu[i].parentElement.style.background = "#f3f3f3";
}
};
</script>
강추~!
답변을 작성하시기 전에 로그인 해주세요.