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

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

공유정신 5년 전 조회 4,186

안녕하세요. 제목처럼,

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

어떻게 해야 하나요?

 

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

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

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

답변 3개

채택된 답변
+20 포인트
toqurk
5년 전

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

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

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

답변에 대한 댓글 1개

공유정신
5년 전
두곳 다 없는것 같아요.
따로 추가해야 되나요?
이런것에 문외한 이라 막막하네요

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

toqurk
5년 전

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

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

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

답변에 대한 댓글 5개

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

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

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

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


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

전체,자유,기타 이것처럼요...
t
toqurk
5년 전
#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 의 클래스를 삽입시켜라 라고 명령을 줘넣으면 원하시는데로 될거라고 생각됩니다^^
공유정신
5년 전
휴~ 어렵네요. 검색해보면서 삽질해도 해결이 안되고 있어요.
자바스트립트로 구체적으로 어떻게 하면 좋을까요?
t
toqurk
5년 전
혹시 네이트온 하시면 toqurk4865@nate.com 친추 거시고요..
아니면 카톡 계정 알려주시면 제가 친추하겠습니다.
공유정신
5년 전
$('#gnb .gnb_1dli').click(function(){
$(this).addClass('gnb_1da').siblings().removeClass('gnb_1da');
})


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

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

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

toqurk
5년 전

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

or 

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

 

해당 CSS 확인

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

답변에 대한 댓글 2개

공유정신
5년 전
/* 메인메뉴 */
#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 입니다.
공유정신
5년 전
<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>



메뉴 쪽 코드 입니다.

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

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

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

로그인