웹마스터 팁

제가 사용한 방식입니다.


저 같은 경우는 리스트 형태에 있는 카테고리 형태 부분을 다 지우고 header 부분에 넣어서 사용했습니다. <form>의 z-index 값이 높기 때문에 세로 나열을 사용하실 분들은 <form>을 감싸는 div를 만들고 카테고리를 탭처리 한 부분의 z-index 값보다 낮게 설정하셔야 합니다 . - 상세한 설명은 손가락 품을 팔아 보시라는 말로  ^^&

{@ $cate_list = array(); $current_key = null; }
<!--@foreach($category_list as $key=>$val)-->
<!--@if(!$val->depth)-->
{@
$cate_list[$key] = $val;
$cate_list[$key]->children = array();
$current_key = $key;
}
<!--@elseif($current_key)-->
{@ $cate_list[$current_key]->children[] = $val }
<!--@end-->
<!--@end-->

일단 탭이 들어가는 부분위에 위 내용을 넣습니다. 저도 php를 잘 모르기에 하여튼 위에서 변수를 바꾸기에 아래와 같은 배열이 가능해 집니다.

<ul class="cTab" cond="$module_info->use_category=='Y'">
<li class="on"|cond="!$category"><a href="{getUrl('category','','page',''+ ')}">{$lang->total}</a></li>
<li loop="$cate_list=>$key,$val" class="on"|cond="$category==$val->category_srl"><a href="{getUrl(category,$val->category_srl,'document_srl','')}">{$val->title}<!--<em cond="$val->document_count">[{$val->document_count}]</em>--></a>
<ul cond="count($val->children)">
<li loop="$val->children=>$idx,$item" class="on_"|cond="$category==$item->category_srl"><a href="{getUrl(category,$item->category_srl,'document_srl'+ ','')}">{$item->title}<!--<em cond="$val->document_count">[{$item->document_count}]</em>--></a></li>
</ul>
</li>
</ul>

위 부분이 분류를 탭형식이든 메뉴형식이든 활용할 수 있는 2단으로 배열할 수 있는 html 구조입니다.

나머지 2단메뉴가 엑티브일때 상위 메뉴에 클라스 명을 넣어 활성화 됨을 표현하기 위한 js

$('.cTab>li>ul>li.on_').parents('li:first').addClass('on');


가급적 v3 게시판 탭형식을 한번 읽어 보시기를 권해 드리며 저 부분만 어느 게시판이든 옮겨 가시면 탭형식의 메뉴든 어떤 메뉴형식이든 변형이 가능합니다.

주의 할 점은...

$('.cTab>li>ul>li.on_').parents('li:first').addClass('on'); 이런 형식이어야 활성화된 2차 메뉴의 상위 메뉴에 클라스명을 먹일 수 있다는 겁니다.

php로 변수값을 바꿔도 정확하게 아버지 아들 구조는 아닌거 같습니다.
그냥 아무생각 없이 $('li.on_').parents().parents('li').addClass('on');로 나갔더니 1차 메뉴의 모든 li에 클라스명 on이 먹히더군요
그래서 다시 v3 게시판의 js를 보고 수정해서 저도 사용했습니다. ^^
제목 글쓴이 날짜
셀렉트 메뉴를 통해 갤러리 만들기 한현종 2004.09.10
메뉴 추가 삭제 수정시 쓰면 좋을것 같네요 - 출처: http://www.happyscript.com/ [1] 예뜨락 2004.09.17
슬라이딩 메뉴 자바스크립트 [3] 행복한고니 2004.09.21
가로 세로가 호환되는 메뉴 [3] 이영준 2005.03.02
[동영상강좌] 제4회차 - 풀다운메뉴 만드는방법 아이티스터디 2006.02.02
위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 [1] 김민환 2006.10.10
슬라이딩 레이어 메뉴!! 메뉴가 상하로 따라다녀요!! [4] TiZa 2007.02.03
include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] 김병희 2003.10.25
나만의 미니홈 만들기 ㅡ메뉴에 게시판 연결 [5] file 예뜨락 2004.12.17
[PHP 동영상강의] 50. 자바스크립트로 풀다운 메뉴제작 [2] 서기 2007.08.08
초보자도 쉽게 이해할수있도록 주석을 자세히 달아놓은 APM 메뉴얼 (1 of 4) [3] Dopesoul 2002.12.18
초보자도 쉽게 이해할수있도록 주석을 자세히 달아놓은 APM 메뉴얼 (2 of 4) [4] Dopesoul 2002.12.18
초보자도 쉽게 이해할수있도록 주석을 자세히 달아놓은 APM 메뉴얼 (3 of 3) [2] Dopesoul 2002.12.21
[왕초보팁] 2차 메뉴를 레이아웃 스킨에 넣을 때 [2] HolyJohn 2011.01.21
메뉴에서 채팅방 띄우기 용도로 쓰는 스크립트 코아 코스튬 2011.01.30
메뉴 클릭시 알림메시지 띄우기 [1] 도라란 2011.02.27
홈페이지에 퀵메뉴를 다는 소스 (ie7이상, 사파리, 불여우, 오페라 등은 position:fixed 로 고정) [20] Firstlove 2011.03.14
V3 게시판 (분류메뉴-2단계지원) 일반 게시판으로 옮겨 사용하기 ForHanbi 2011.09.09
Xe 1.5.0.9 사용자 설치메뉴얼 제2부 [22] file 황비 2011.11.22
Xe 1.5.0.9 사용자 설치 메뉴얼 제1부. [3] file 황비 2011.12.04