채택완료

사이드메뉴 클릭시 메뉴 글자색 빨간색으로 변화 주기

2023-10-31 (화) 17:37:40 2,275

이럭저력 고수님들의 도움으로 사이드메뉴(3차메뉴)까지 구현 성공 하였으니.

링크 주소와 같이 해당메뉴를 클릭하면 빨간으로 변화 주고 싶은데 제 머리론 힘든것 같습니다.

현재사용되고 있는 소스 다름과 같습니다.

어디를 수정해야 할지 아니면 추가를 해야 할지 고수님의 조언 부탁 드립니다.

Copy
<?php
if (!defined('_GNUBOARD_')) exit;

if($bo_table){
$menu_url = G5_URL."/bbs/board.php?bo_table=".$bo_table;
}else{
$menu_url = G5_URL.$_SERVER['REQUEST_URI'];
}
$menu = sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and me_link = '$menu_url' ");
$me_code = substr($menu['me_code'],0,2);
?>
<script type="text/javascript">
function display_submenu(num) {
    document.getElementById("mysub"+num).style.display="block";
}
</script>
<script>
// 지우지 말아주세요. 새창 등에서도 사용합니다.
$(document).ready(function() {
    $("#mysubmenu a").on("click", function(e){ //링크 클릭시
        var $data_midtxt = $(this).attr("data-midtxt");
        if( $data_midtxt ){
            $.cookie('sub_midtxt', $data_midtxt, { path: '/' });
        } else {
            $.cookie('sub_midtxt', null, { path: '/' });
        }
    });
});
</script>
  <style>
 #mysubmenu  {border: 1px solid #d2d9e6; border-bottom: 1px solid #c1ccda;margin:0px 15px 15px;background:#fff;position:relative;
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 box-shadow:0 1px 2px rgba(0,0,0,0.1)}
 #mysubmenu ul {list-style:none; margin:0; padding:0;}
 #mysubmenu li { margin: 0; list-style: none;}

 #mysubmenu li.leftmenu_b {line-height:35px; margin-top:0px; padding:5px 0 3px 35px; border-bottom:0px solid #dddddd; text-align:left; font-size:14pt; font-weight:bold; background:#d1d1d1; }
 #mysubmenu li.leftmenu_b a{ color:#F70303; }

 #mysubmenu li.leftmenu_s {line-height:33px; margin-bottom:0px; padding-left:35px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#fff; color:#333; }
 #mysubmenu li.leftmenu_s:hover { background:#fff;color:#F40B6E; }

 #mysubmenu li.leftmenu_s_on {line-height:33px; margin-bottom:0px; padding-left:35px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#5aacca; color:#C3E4F1;  }
 #mysubmenu li.leftmenu_s_on a{ color:#C3E4F1; }

 #mysubmenu li.leftmenu_s a:focus, #mysubmenu li.leftmenu_s a:hover { color:#fff;color:#F40B6E;}

 #mysubmenu li.leftmenu_c {line-height:33px; margin-bottom:0px; padding-left:15px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#fff; color:#333; }
 #mysubmenu li.leftmenu_c:hover { background:#fff;color:#F40B6E; }

 #mysubmenu li.leftmenu_c_on {line-height:33px; margin-bottom:0px; padding-left:35px; border-bottom:0px solid #e6e6e6; font-size:12pt;font-weight:bold; background:#5aacca; color:#C3E4F1;  }
 #mysubmenu li.leftmenu_c_on a{ color:#C3E4F1; }

 #mysubmenu li.leftmenu_c a:focus, #mysubmenu li.leftmenu_s a:hover { color:#fff;color:#F40B6E;}
 </style>
    <div id="mysubmenu">

<?php
        $tmp_code = substr($me_code,0,2);
        $tmp_menu_name=sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and length(me_code) = '2' and me_code = '$tmp_code' ");
        ?>

    <li class="leftmenu_b"><font color=#F70303><h3><?=$tmp_menu_name['me_name']?></h3></font>
<li>
        <?

        $sql2 = " select *
                    from {$g5['menu_table']}
                    where me_use = '1'
                      and length(me_code) = '4'
                      and substring(me_code, 1, 2) = '$tmp_code'
                    order by me_order,me_code, me_id ";
        $result2 = sql_query($sql2);

        for ($k=0; $row2=sql_fetch_array($result2); $k++) {
            if($k == 0)
                echo '<ul class="snb_2dul">'.PHP_EOL;
        ?>
            <li class="leftmenu_s">
                <a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="leftmenu_s <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"><?php echo $row2['me_name'] ?></a>
        <?php

            //3차메뉴 불러 오기.
            $sql3 = " select *
                        from {$g5['menu_table']}
                        where me_use = '1'
                          and length(me_code) = '6'
                          and substring(me_code, 1, 4) = '{$row2['me_code']}'
                        order by me_order,me_code, me_id ";
            $result3 = sql_query($sql3);
            $num3 = sql_num_rows($result3);
            if($num3>0){
                echo '<ul class="snb_3dul">'.PHP_EOL;
                while($row3=sql_fetch_array($result3)){
        ?>
                <li class="leftmenu_c">
                        <a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>" class="leftmenu_c <?php if($row3['me_code']==$me_code) { echo "on2"; }?>">-<?php echo $row3['me_name'] ?></a>
                    </li>
        <?php
                }
                echo '</ul>'.PHP_EOL;
            }
            echo '</li>'.PHP_EOL;                    

        }

        if($k > 0)
            echo '</ul>'.PHP_EOL;
        ?>
       

</div>
|

답변 3개 / 댓글 11개

채택된 답변
+20 포인트

class="leftmenu_s <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"

==>>

class="leftmenu_s_<?php if($row2['me_code']==substr($me_code,0,4)) { echo 'on'; }?>"

답변에 대한 댓글 3개

2023-11-02 (목) 00:09:18
감사합니다.
언더바가 문제 있었군요
2023-11-02 (목) 00:35:29
사이드메뉴 클릭시 빨간색 유지가 안되네요
#mysubmenu li.leftmenu_s_on
=> li 제거
#mysubmenu .leftmenu_s_on

조건이 맞는지 확인이 필요합니다.
if($row2['me_code']==substr($me_code,0,4))
[code]
<div id="mysubmenu">
<?php
$tmp_code = substr($me_code, 0, 2);
$tmp_menu_name = sql_fetch(" select * from {$g5['menu_table']} where me_use = '1' and length(me_code) = '2' and me_code = '$tmp_code' ");
?>
<li class="leftmenu_b"><font color=#F70303><h3><?= $tmp_menu_name['me_name'] ?></h3></font>
<li>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '$tmp_code'
order by me_order, me_code, me_id ";
$result2 = sql_query($sql2);
for ($k = 0; $row2 = sql_fetch_array($result2); $k++) {
if ($k == 0)
echo '<ul class="snb_2dul">' . PHP_EOL;
?>
<li class="leftmenu_s_<?php if ($row2['me_code'] == substr($me_code, 0, 4)) {
echo "on";
} ?>">
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="leftmenu_s"><?php echo $row2['me_name'] ?></a>
<?php
// 3차메뉴 불러 오기.
$sql3 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '6'
and substring(me_code, 1, 4) = '{$row2['me_code']}'
order by me_order, me_code, me_id ";
$result3 = sql_query($sql3);
$num3 = sql_num_rows($result3);
if ($num3 > 0) {
echo '<ul class="snb_3dul">' . PHP_EOL;
while ($row3 = sql_fetch_array($result3)) {
?>
<li class="leftmenu_c_<?php if ($row3['me_code'] == $me_code) {
echo "on2";
} ?>">
<a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>"
class="leftmenu_c">-<?php echo $row3['me_name'] ?></a>
</li>
<?php
}
echo '</ul>' . PHP_EOL;
}
echo '</li>' . PHP_EOL;
}
if ($k > 0)
echo '</ul>' . PHP_EOL;
?>
</div>
[/code]
2023-10-31 (화) 18:31:51

다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다.

먼저, 좌측 메뉴 항목에 해당 메뉴를 식별하는 클래스를 추가합니다.

Copy
// 좌측 메뉴 항목에 클래스 추가
<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="leftmenu_s <?php if($row2['me_code']==substr($me_code,0,4)) { echo "on"; }?>"><?php echo $row2['me_name'] ?></a>

그런 다음, 아래의 JavaScript 코드를 사용하여 선택된 메뉴를 클릭했을 때 좌측 메뉴 항목에 클래스 on을 추가하고, 다른 항목의 on 클래스를 제거하면 될 것 같네요

Copy
<script>
$(document).ready(function() {
    $("#mysubmenu a").on("click", function(e) {
        // 이전에 선택된 메뉴 항목의 'on' 클래스를 제거
        $("#mysubmenu a").removeClass("on");
        
        // 현재 클릭한 메뉴 항목에 'on' 클래스 추가
        $(this).addClass("on");
        
        var $data_midtxt = $(this).attr("data-midtxt");
        if ($data_midtxt) {
            $.cookie('sub_midtxt', $data_midtxt, { path: '/' });
        } else {
            $.cookie('sub_midtxt', null, { path: '/' });
        }
    });
});
</script>

답변에 대한 댓글 1개

2023-10-31 (화) 18:48:50
위소스로 해서 잘 안되는대요
2023-10-31 (화) 17:55:47

현재 빨간색으로 나오고 있는것 아닌가요?;;;

상위메뉴

color:#F70303; 

하위메뉴

color:#F40B6E;

현재 이렇게 되어있는데요? ;;;--;;;

답변에 대한 댓글 7개

2023-10-31 (화) 18:01:40
해당 싸이트 들어 가보세요.
클릭해도 글자 색이 변화 없음.
저도 그렇게 생각 해봤는데 전혀 변화가 없네요. 이상합니다
http://ace.korea505.com
혹시 active라든가 visit 부분이 빠진것 아닐까요
2023-10-31 (화) 18:03:40
클릭시 했을때 빨간색 유지
그누에서 서브메뉴는 마우스 오버기능 스크립트 처리로 스탑이 않됩니다.
또한 css 에서 처리 또한 않됩니다.
그렇다면
이문제를 해결방법은 없을까요? 있습니다.

에코 처리 된부분에서 직접 스타일을 정의 해 주시면 해결됩니다.
2023-10-31 (화) 18:30:35
초보라 무슨뜻인지 잘 모르겠습니다.
"에코 처리 된부분에서 직접 스타일을 정의 해 주시면 해결됩니다."
이부분을 어떻게 정의 할까요?
소스좀 올려 주시면 안될까요?
일단 스타일에서 호버처리 해보세요
.snb_3dul:hover {
background-color: #F40B6E;
}
이런식으로 해보시고 만약에 않되시면......


그때는
해당 폰트 직접 처리 해야합니다.
echo " style='color:#F40B6E;'";
또는 백그라운드
echo " style='background-color:#F40B6E;'";
이런식으로 요
하나더 해볼까요?

<a href="<?php echo $row3['me_link']; ?>" target="_<?php echo $row3['me_target']; ?>" class="leftmenu_c <?php if($row3['me_code'] == $me_code) { echo "on2"; } ?>" style="color: red; text-decoration: underline;">-<?php echo $row3['me_name'] ?></a>
2023-10-31 (화) 19:44:59
수고 많이 하시는데 잘 안됩니다.
클릭도 안했는데 빨간색 및 밑줄이 생깁니다
===================
일단 스타일에서 호버처리 해보세요
.snb_3dul:hover {
background-color: #F40B6E;
}
이런식으로 해보시고 만약에 않되시면......


그때는
해당 폰트 직접 처리 해야합니다.
echo " style='color:#F40B6E;'";
또는 백그라운드
echo " style='background-color:#F40B6E;'";
이런식으로 요.

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