서브메뉴(2차메뉴) 리스트 뽑는 기능에서 현재페이지명 강조는 어떻게 해야할까요? 채택완료
혜자스러운 분께서 올려주신
서브메뉴(2차메뉴) 리스트 뽑는 기능을 수정하여 사용하고있습니다.
(참고 : https://sir.kr/g5_skin/7515)
현재 보고있는 페이지의 메뉴명을 강조처리하는 class를 넣고싶은데..
방법이없을까요?
리스트명이 [me_name] 으로 뽑아나오는거라 스크립트나 어떤 php구문으로 넣어야할것같은데
이쪽을 잘몰라서요 ㅠㅠ
검색해본결과 제가 잘못한건지모르겠지만 해결된게 없었어요.
사이트와 코드 첨부해드립니다.
메뉴명 노출하는 부분은 아래이고요.
전체코드는 아래와 같습니다.
function display_submenu(num) {
document.getElementById("mysub"+num).style.display="block";
}
function display_submenu(num) {
document.getElementById("mysub"+num).style.display="block";
}
#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}
}
부디 조언부탁드립니다..!
감사합니다!
답변 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 에 대한 디자인만 설정하시면 될거에요.
테스트는 안해봤습니다~
답변에 대한 댓글 2개
서브메뉴 리스트가 아닌 상단 대메뉴->서브메뉴로 들어갔을경우엔 강조표시가 되지않는 부분이 있네요.
하지만, 답변주신내용은 너무너무감사드립니다 많은 도움이되었습니다!
댓글을 작성하려면 로그인이 필요합니다.
링크 파라메터의 시작인 test.php?a=1 로 시작합니다.
하지만 위에 샘플코드 올려놓은거는 앞에 ? 파라메터가 있다고 간주하고 강제로 &menu_code 를 붙였구요.
다이렉트로 붙게되면 링크에 문제가 생기죠
해결방법은 메뉴링크 url 에 안쓰는 파라메터를 항상붙이시거나 ?a=1
혹은 php 의 parse_url 기본 함수를 사용해 해당 $row['me_link'] 에 파라메터가 존재하는지 체크하시어
menu_code 파라미터에 &을 붙일지 ? 를 붙일지 체크하시면 될듯 합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
우선 말씀하신대로 하니까 잘 됩니다^^!
궁금한게 있는데,
1. url에 #으로 끝나는 게 있거나 / ?로 시작하는 파라메터가 없으면 안된다고 하셨는데
-> ex) http://namusam.net/sub/11.php처럼 url에 물음표가 없으면 반응하지않는다는얘기이실까요?
-> ex) http://namusam.net/bbs/content.php?co_id=21#a01 이런식으로 url에 #이 들어가도 안된단말씀이시지요?
기꺼이 답변주셔서 너무감사드립니다!!!^^