메뉴 클릭 시 on 이 되도록 하고 싶은데 어떻게 해야 하나요?
본문
메뉴 클릭 시 on 이 된 상태에서 새로고침을 해도 on 된 상태가 풀리지 않게 하고싶습니다.
(단, 다른 메뉴 클릭 시 클릭한 메뉴에 on 이 되게 하고 싶습니다.)
해당 기능은 어디에서 수정하면 되는지 궁금합니다.
(예전에 어디서 봐서 간단하게 했던 것 같은데, 오래 전에 해서 잘 기억이..ㅠㅠ)
답변 6
그누 원본은 간단하게 안 되고, 빌더 이용하면 기본 지원되는 기능입니다.
배추빌더5 / 아미나 / 나리야 / 이윰 등 모두 지원하는 걸로 알고 있습니다.
관련 빌더들을 다운받아 분석해 보시면 힌트를 얻으실 수 있을 겁니다.
분석해보시면 아시겠지만, 쉬운 기능이 아닙니다.
예전 아주 초보 시절 배추빌더5 소스 분석해보면서 공부한 적 있는데, 눈이 핑핑 돌더라구요.
구현 기본 원리는 URL상의 특정 값과 메뉴표상의 특정값이 같으면 해당 메뉴에 클래스를 추가해 해당 클래스 값이 적용되게 하는 겁니다.
웅푸 님이 링크해주신 방법 경우엔 data 속성을 이용해 로컬저장소에 값을 저장 후 그 값과 url상 값이 같은지 여부로 판별하는 방법이네요.
data-* 속성 : https://homzzang.com/b/html-193
JS indexOf() 메서드 이용해서도 구현하기도 합니다. (목차 5번)
참고로 저는 구현이 어렵고도 귀찮아 배추빌더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>
$_GET 변수에 의한 Class 변화가 포인트 입니다.
무식한 방법이지만 원하는 결과를 만들어서 해결했습니다.. ( -_- );;
똑같은 디자인의 게시판 스킨을 하나 더 만들어준..
방법은 아래와 같습니다.
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;}
