PC기본 스킨에서 메뉴 클릭후에도 색상유지 하려면?

PC기본 스킨에서 메뉴 클릭후에도 색상유지 하려면?

QA

PC기본 스킨에서 메뉴 클릭후에도 색상유지 하려면?

본문

안녕하세요. 제목처럼,

PC 기본 스킨에서 메뉴 클릭후에도 색상유지 하려면

어떻게 해야 하나요?

 

보면 마우스를 가져다 대면 파란색으로 변하는데,

클릭후에도 계속 이 색상을 유지 시켜 강조표시 할려면 어떻게 히야 하나요?

이 질문에 댓글 쓰기 :

답변 3

css 에서 a:hover 쪽을 보시던지 없을경우

js 에서 ('아이디 or 클래스').hover (function 이 있는지 찾아보셔요

크롬에서 사이트 여시고요..개발자 도구(F12)를 열고 해당 부분 선택 

or 

해당 부분 마우스 우측 클릭 후 검사 하면 개발자도구(F12) 열림

 

해당 CSS 확인

/* 메인메뉴 */
#gnb {position:relative;background:#fff}
#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap {margin:0 auto;position:relative}
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3}
#gnb #gnb_1dul {font-size:1.083em;padding:0;border-bottom:1px solid #e0e2e5;zoom:1}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli {float:left;line-height:55px;padding:0px;position:relative}
#gnb .gnb_1dli:hover > a {color:#3a8afd;
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}


메뉴쪽 css 입니다.

<nav id="gnb">
        <h2>메인메뉴</h2>
        <div class="gnb_wrap">
            <ul id="gnb_1dul">
                <li class="gnb_1dli gnb_mnal"><button type="button" class="gnb_menu_btn" title="전체메뉴"><i class="fa fa-bars" aria-hidden="true"></i><span class="sound_only">전체메뉴열기</span></button></li>
                <?php
$menu_datas = get_menu_db(0, true);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
                $i = 0;
                foreach( $menu_datas as $row ){
                    if( empty($row) ) continue;
                    $add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
                ?>
                <li class="gnb_1dli <?php echo $add_class; ?>" style="z-index:<?php echo $gnb_zindex--; ?>">
                    <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
                    <?php
                    $k = 0;
                    foreach( (array) $row['sub'] as $row2 ){

                        if( empty($row2) ) continue;

                        if($k == 0)
                            echo '<span class="bg">하위분류</span><div class="gnb_2dul"><ul class="gnb_2dul_box">'.PHP_EOL;
                    ?>
                        <li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>
                    <?php
                    $k++;
                    }  //end foreach $row2

                    if($k > 0)
                        echo '</ul></div>'.PHP_EOL;
                    ?>
                </li>
                <?php
                $i++;
                }  //end foreach $row

                if ($i == 0) {  ?>
                    <li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
                <?php } ?>
            </ul>
            <div id="gnb_all">
                <h2>전체메뉴</h2>
                <ul class="gnb_al_ul">
                    <?php
                   
                    $i = 0;
                    foreach( $menu_datas as $row ){
                    ?>
                    <li class="gnb_al_li">
                        <a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_al_a"><?php echo $row['me_name'] ?></a>
                        <?php
                        $k = 0;
                        foreach( (array) $row['sub'] as $row2 ){
                            if($k == 0)
                                echo '<ul>'.PHP_EOL;
                        ?>
                            <li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
                        <?php
                        $k++;
                        }  //end foreach $row2

                        if($k > 0)
                            echo '</ul>'.PHP_EOL;
                        ?>
                    </li>
                    <?php
                    $i++;
                    }  //end foreach $row

                    if ($i == 0) {  ?>
                        <li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 &gt; 환경설정 &gt; 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
                    <?php } ?>
                </ul>
                <button type="button" class="gnb_close_btn"><i class="fa fa-times" aria-hidden="true"></i></button>
            </div>
            <div id="gnb_all_bg"></div>
        </div>
    </nav>



메뉴 쪽 코드 입니다.

개발자님 한번 봐주세요. 저의 힘으론 도저히 할수가 없네요 ㅠ

소스 상보단 사이트를 알려주심이 더 빠르실겁니다.

사이트의 어느 부분인지 캡쳐하시고 찍은 후 사이트 정보를 알려주시면 차라리 더 빨리 알려드릴수가 있습니다.^^

제가 로컬에서 테스트를 하다 보니 어디에 올려놓지 않은 상황압니다.
잠시만요... 그냥 기본 스킨입니다.

https://demo.sir.kr/gnuboard5/

여기 메뉴 부분에 보시면 마우스를 갖다 대면 파란색으로 변하잖아요?

클릭후에도 계속 파란색이 유지 되게 할려고 하는겁니다.


게시판에 들어가서 메뉴 아래에 보시면 카테고리가 있잖아요?

전체,자유,기타  이것처럼요...

#gnb .gnb_1dli:hover > a {color:#3a8afd;
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

이부분이 오버했을때 나오는 내용이고요..

만약 말씀하신데로 클릭 후에도 유지하고 싶으신거라면 header 나 group.php 페이지에 jquery 로 현재 사이트 주소의 내용을 확인하고 indexOf 하셔서 일치한다면 해당 영역
(".
(".gnb_1dli").addclass('

gnb_1dli_over 와 gnb_1dli_on 의 클래스를 삽입시켜라 라고 명령을 줘넣으면 원하시는데로 될거라고 생각됩니다^^

$('#gnb .gnb_1dli').click(function(){
    $(this).addClass('gnb_1da').siblings().removeClass('gnb_1da');
    })


이렇게 하니 메뉴 클릭시 색상 변경후 유지가 되는데요.

문제는 메뉴 아래 카테고리를 클릭하면 다시 색상이 되돌아 갑니디.

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

회원로그인

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