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

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

QA

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

답변 3

본문

안녕하세요. 제목처럼,

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');
    })


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

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 67
© SIRSOFT
현재 페이지 제일 처음으로