서브메뉴(2차메뉴) 리스트 뽑는 기능에서 현재페이지명 강조는 어떻게 해야할까요?
본문
혜자스러운 분께서 올려주신
서브메뉴(2차메뉴) 리스트 뽑는 기능을 수정하여 사용하고있습니다.
(참고 : https://sir.kr/g5_skin/7515)
현재 보고있는 페이지의 메뉴명을 강조처리하는 class를 넣고싶은데..
방법이없을까요?
리스트명이 [me_name] 으로 뽑아나오는거라 스크립트나 어떤 php구문으로 넣어야할것같은데
이쪽을 잘몰라서요 ㅠㅠ
검색해본결과 제가 잘못한건지모르겠지만 해결된게 없었어요.
사이트와 코드 첨부해드립니다.
메뉴명 노출하는 부분은 아래이고요.
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>">
<li class="leftmenu_s"><?php echo $row2['me_name'] ?></li>
</a>
전체코드는 아래와 같습니다.
<script type="text/javascript">
function display_submenu(num) {
document.getElementById("mysub"+num).style.display="block";
}
function display_submenu(num) {
document.getElementById("mysub"+num).style.display="block";
}
</script>
<style TYPE="text/css">
#submenu_list {font-size: 0; width:800px; margin:0 auto}
#mysubmenu{margin:5px auto}
#mysubmenu ul {list-style:none; font-size:11pt; margin:0; padding:0; text-align: center}
#mysubmenu .leftmenu_b {margin-bottom:15px; background-color:#E7EDF1;border:1px solid gray;text-align:center;font-size:12px;font-weight:bold;display: none}
#mysubmenu .leftmenu_s {line-height: 24px; margin-bottom:5px; width:18%; text-align: center; display: inline-block; margin:5px auto; font-size: 13px; color:#5e5e5e; background: #eee; padding:5px}
#mysubmenu .leftmenu_s:hover, :focus {background: #ddd}
#mysubmenu a {text-decoration:none; color:#999; }
#mysubmenu a:hover {color:black;}
@media only screen and (min-width : 721px) and (max-width : 1199px) {
#submenu_list {font-size: 0; width:95%; margin:0 auto}
}
@media only screen and (min-width : 320px) and (max-width : 720px) {
#submenu_list {font-size: 0; width:95%; margin:0 auto}
#mysubmenu .leftmenu_s {line-height: 24px;width:45%; text-align: center; display: inline-block; margin:1px auto; font-size: 12px; color:#5e5e5e; background: #eee; padding:5px}
}
</style>
<div id="mysubmenu">
<?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++) {
?>
<ul id="mysub<?php echo $i ?>" style="display:none;">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" ><li class="leftmenu_b"><?php echo $row['me_name'] ?></li></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 ( ($row['me_name']==$board['bo_subject'])||($row['me_name']==$g5['title']) ) {
echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");
}
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>">
<li class="leftmenu_s"><?php echo $row2['me_name'] ?></li>
</a>
<?php
//좌측 서브메뉴 전체 리스트에서 현재 페이지에 해당하는 대메뉴 리스트만 보여줌
if ( ($row2['me_name']==$board['bo_subject'])||($row2['me_name']==$g5['title']) ) {
echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");
}
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</ul>
<?php } ?>
</div>
부디 조언부탁드립니다..!
감사합니다!
답변 2
메뉴 노출시 아래 진한 글씨처럼 설정하세요.
하지만 링크 url이 #으로 끝나거나 ?로 시작하는 파라메터가 없으면 문제가되니 잘 설정하시구요.
<a href="<?php echo $row2['me_link']; ?>&menu_code=<?php echo $row2['me_code']?>" target="_<?php echo $row2['me_target']; ?>">
<li class="leftmenu_s menu_code_<?php echo $row2['me_code']?>"><?php echo $row2['me_name'] ?></li>
</a>
그리고 하단영역 공통파일 (tail.php 등) 에 스크립트를 적당한곳에 추가하세요.
<?php if($_GET['menu_code']) {?>
<script>
$('.menu_code_<?php echo $_GET['menu_code']?>').addClass("active_menu");
</script>
<?}?>
이렇게 해놓으면 현재위치한 메뉴클래스에 active_menu 라는 클래스가 추가됩니다.
css 파일에 active_menu 에 대한 디자인만 설정하시면 될거에요.
테스트는 안해봤습니다~
안녕하세요! 답변주셔서 너무너무너무너무 감사드려요!
우선 말씀하신대로 하니까 잘 됩니다^^!
궁금한게 있는데,
1. url에 #으로 끝나는 게 있거나 / ?로 시작하는 파라메터가 없으면 안된다고 하셨는데
-> ex) http://namusam.net/sub/11.php처럼 url에 물음표가 없으면 반응하지않는다는얘기이실까요?
-> ex) http://namusam.net/bbs/content.php?co_id=21#a01 이런식으로 url에 #이 들어가도 안된단말씀이시지요?
기꺼이 답변주셔서 너무감사드립니다!!!^^
아, 그리고 해당코드로 반영하니 너무너무 잘되고 좋습니다만 하나아쉬운점은
서브메뉴 리스트가 아닌 상단 대메뉴->서브메뉴로 들어갔을경우엔 강조표시가 되지않는 부분이 있네요.
하지만, 답변주신내용은 너무너무감사드립니다 많은 도움이되었습니다!
링크 파라메터의 시작인 test.php?a=1 로 시작합니다.
하지만 위에 샘플코드 올려놓은거는 앞에 ? 파라메터가 있다고 간주하고 강제로 &menu_code 를 붙였구요.
다이렉트로 붙게되면 링크에 문제가 생기죠
해결방법은 메뉴링크 url 에 안쓰는 파라메터를 항상붙이시거나 ?a=1
혹은 php 의 parse_url 기본 함수를 사용해 해당 $row['me_link'] 에 파라메터가 존재하는지 체크하시어
menu_code 파라미터에 &을 붙일지 ? 를 붙일지 체크하시면 될듯 합니다.
