서브메뉴(2차메뉴) 리스트 뽑는 기능에서 현재페이지명 강조는 어떻게 해야할까요?

서브메뉴(2차메뉴) 리스트 뽑는 기능에서 현재페이지명 강조는 어떻게 해야할까요?

QA

서브메뉴(2차메뉴) 리스트 뽑는 기능에서 현재페이지명 강조는 어떻게 해야할까요?

본문

혜자스러운 분께서 올려주신

서브메뉴(2차메뉴) 리스트 뽑는 기능을 수정하여 사용하고있습니다.

(참고 : https://sir.kr/g5_skin/7515)

 

현재 보고있는 페이지의 메뉴명을 강조처리하는 class를 넣고싶은데..

방법이없을까요?

 

리스트명이 [me_name] 으로 뽑아나오는거라 스크립트나 어떤 php구문으로 넣어야할것같은데

이쪽을 잘몰라서요 ㅠㅠ

검색해본결과 제가 잘못한건지모르겠지만 해결된게 없었어요.

 

사이트와 코드 첨부해드립니다.

http://namusam.net/

 

메뉴명 노출하는 부분은  아래이고요.


 <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 파라미터에 &을 붙일지 ? 를 붙일지 체크하시면 될듯 합니다.

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 88
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT