테스트 사이트 - 개발 중인 베타 버전입니다

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

뚜이야 3년 전 조회 2,092

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

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

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

 

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

방법이없을까요?

 

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

이쪽을 잘몰라서요 ㅠㅠ

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

 

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

http://namusam.net/

 

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

</p>

<p> <a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>">

             <li class="leftmenu_s"><?php echo $row2['me_name'] ?></li>

           </a></p>

<p>

전체코드는 아래와 같습니다.

</p>

<p><script type="text/javascript"></p>

<p>    function display_submenu(num) {

         document.getElementById("mysub"+num).style.display="block";

    }</p>

<p>    function display_submenu(num) {

         document.getElementById("mysub"+num).style.display="block";

    }</p>

<p>

</script></p>

<p><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}</p>

<p>}</p>

<p>@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></p>

<p><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 값 설정용</p>

<p>    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);</p>

<p>            //좌측 서브메뉴 전체 리스트에서 현재 페이지에 해당하는 대메뉴 리스트만 보여줌

            if ( ($row['me_name']==$board['bo_subject'])||($row['me_name']==$g5['title']) ) {

                echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");

            }</p>

<p>            for ($k=0; $row2=sql_fetch_array($result2); $k++) {

                if($k == 0)

                    echo '<ul>'.PHP_EOL;

            ?></p>

<p>           <a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>">

             <li class="leftmenu_s"><?php echo $row2['me_name'] ?></li>

           </a></p>

<p>            <?php</p>

<p>                //좌측 서브메뉴 전체 리스트에서 현재 페이지에 해당하는 대메뉴 리스트만 보여줌

                if ( ($row2['me_name']==$board['bo_subject'])||($row2['me_name']==$g5['title']) ) {

                    echo ("<script language='javascript'> display_submenu(" .$i. " ); </script> ");

                }</p>

<p>            }</p>

<p>            if($k > 0)

                echo '</ul>'.PHP_EOL;

            ?>

    </ul></p>

<p>    <?php } ?></p>

<p>

</div>

 </p>

<p>

 

 

 

부디 조언부탁드립니다..!

감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
포이치
3년 전

메뉴 노출시 아래 진한 글씨처럼 설정하세요.

하지만 링크 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개

뚜이야
3년 전
안녕하세요! 답변주셔서 너무너무너무너무 감사드려요!
우선 말씀하신대로 하니까 잘 됩니다^^!

궁금한게 있는데,
1. url에 #으로 끝나는 게 있거나 / ?로 시작하는 파라메터가 없으면 안된다고 하셨는데
-> ex) http://namusam.net/sub/11.php처럼 url에 물음표가 없으면 반응하지않는다는얘기이실까요?
-> ex) http://namusam.net/bbs/content.php?co_id=21#a01 이런식으로 url에 #이 들어가도 안된단말씀이시지요?

기꺼이 답변주셔서 너무감사드립니다!!!^^
뚜이야
3년 전
아, 그리고 해당코드로 반영하니 너무너무 잘되고 좋습니다만 하나아쉬운점은
서브메뉴 리스트가 아닌 상단 대메뉴->서브메뉴로 들어갔을경우엔 강조표시가 되지않는 부분이 있네요.

하지만, 답변주신내용은 너무너무감사드립니다 많은 도움이되었습니다!

댓글을 작성하려면 로그인이 필요합니다.

포이치
3년 전

링크 파라메터의 시작인 test.php?a=1 로 시작합니다.

하지만 위에 샘플코드 올려놓은거는 앞에 ? 파라메터가 있다고 간주하고 강제로 &menu_code 를 붙였구요.

다이렉트로 붙게되면 링크에 문제가 생기죠

 

해결방법은 메뉴링크 url 에 안쓰는 파라메터를 항상붙이시거나 ?a=1

혹은 php 의 parse_url 기본 함수를 사용해 해당 $row['me_link'] 에 파라메터가 존재하는지 체크하시어

menu_code 파라미터에 &을 붙일지 ? 를 붙일지 체크하시면 될듯 합니다.

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인