메뉴 클릭 시 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

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

회원로그인

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