메뉴 클릭 시 on 이 되도록 하고 싶은데 어떻게 해야 하나요?

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
메뉴 클릭 시 on 이 되도록 하고 싶은데 어떻게 해야 하나요?

QA

메뉴 클릭 시 on 이 되도록 하고 싶은데 어떻게 해야 하나요?

본문

메뉴 클릭 시 on 이 된 상태에서 새로고침을 해도 on 된 상태가 풀리지 않게 하고싶습니다.

(단, 다른 메뉴 클릭 시 클릭한 메뉴에 on 이 되게 하고 싶습니다.)

해당 기능은 어디에서 수정하면 되는지 궁금합니다.

(예전에 어디서 봐서 간단하게 했던 것 같은데, 오래 전에 해서 잘 기억이..ㅠㅠ)

이 질문에 댓글 쓰기 :

답변 7

그누 원본은 간단하게 안 되고, 빌더 이용하면 기본 지원되는 기능입니다.

배추빌더5 / 아미나 / 나리야 / 이윰 등 모두 지원하는 걸로 알고 있습니다.

관련 빌더들을 다운받아 분석해 보시면 힌트를 얻으실 수 있을 겁니다.

분석해보시면 아시겠지만, 쉬운 기능이 아닙니다. 

예전 아주 초보 시절 배추빌더5 소스 분석해보면서 공부한 적 있는데, 눈이 핑핑 돌더라구요.

 

구현 기본 원리는 URL상의 특정 값과 메뉴표상의 특정값이 같으면 해당 메뉴에 클래스를 추가해 해당 클래스 값이 적용되게 하는 겁니다.

 

웅푸 님이 링크해주신 방법 경우엔 data 속성을 이용해 로컬저장소에 값을 저장 후 그 값과 url상 값이 같은지 여부로 판별하는 방법이네요.

data-* 속성 : https://homzzang.com/b/html-193

 

JS indexOf() 메서드 이용해서도 구현하기도 합니다. (목차 5번)

https://homzzang.com/b/js-110

 

참고로 저는 구현이 어렵고도 귀찮아 배추빌더5 이용 중이네요. 우리처럼 초보는 기본 기능이 빵빵한 빌더 이용하는 게 속시원한 것 같아요. 유지보수는 좀 어렵지만서두요.....

원하시는 것인지는 모르겠습니다.

참조 바랍니다.

제가 사용하고 있는 것 입니다.

상단 메뉴가 아니라 우측 메뉴의 샘플입니다.

잘 응용해보십시오~^^)

 


<style>
#new_gnb {width:300px;margin:0 auto;}
#new_gnb a:hover {color:green;text-decoration:none}
#new_gnb .on {font-weight:bold;color:blue;text-decoration:none}
#new_gnb a {color: inherit} /* 위의 blue 색상이 상속이 되도록  */ 
</style>
 
<table id="new_gnb" border="0" cellspacing="0" cellpadding="0">
<tr>
<td <?php if($bo_table==free) { echo "class='on'";}?>><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=free" target="_self">자유게시판</a>
</td>
</tr>
<tr>
<td <?php if($bo_table==qna) { echo "class='on'";}?>><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=qna" target="_self">질문답변</a>
</td>
</tr>
</table>

무식한 방법이지만 원하는 결과를 만들어서 해결했습니다.. ( -_- );;

똑같은 디자인의 게시판 스킨을 하나 더 만들어준..

 

방법은 아래와 같습니다.

 

1. 메뉴[1] 게시판 스킨 폴더에 있는 style.css 파일에 아래 css를 추가해 줍니다.

.gnb_1dli:nth-child(1) a {background: #000; color: #fff;}

 

2. 메뉴[1] 게시판 스킨 폴더를 복사 붙여넣기로 똑같은 디자인의 게시판 스킨 폴더를 하나 더 만들어 줍니다.

 

3. 관리자 페이지에서 메뉴[2]의 게시판 스킨을 방금 추가한 스킨으로 교체해 줍니다.

 

4. 방금 추가한 게시판 스킨 폴더에 있는 style.css 파일에 아래 css를 추가해줍니다.

.gnb_1dli:nth-child(2) a {background: #000; color: #fff;}

 

 

https://sprunkiphase3.com/
sprunki phase 3 a fan-made mod inspired by the original Incredibox game. Mix fresh beats, create unique music, and enjoy exclusive content online at sprunkiphase3.com

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

회원로그인

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