SIR 메뉴구성에 대한 질문요!!! 고수님들 부탁드립니다.
현재 SIR 메뉴에 보면 클릭할때마다 다른 색상을 뿌려줍니다.
태그를 쓰는건지 아님 스크립트인지... 정말 궁금합니다.
예제를 한개 살짝 들어주시면서 설명을 해주시면 너무 감사드리구요!!!
간단한 설명도 괜찮습니다.
고수님들 부탁드립니다.
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 4개
<style type='text/css'>
/* 최상단 - 우측 메뉴 */
.topright_div {color:#888888; width:460; height:19; text-align:center; padding-top:2;
background:url(<?=$g4['path']?>/img/topmenu_bg.gif) no-repeat;}
.topright_div A:link{color:#888888;}
.topright_div A:visited{color:#888888;}
.topright_div A:hover{color:#888888;}
/* Main 메뉴 회색버튼(비활성 상태) */
.main_menu_gray{width:100; height:27; font-weight:bold; color:#666666;
background:url(<?=$g4['path']?>/img/tab_button_gray.gif) no-repeat;}
.main_menu_gray A:link{color:#666666;}
.main_menu_gray A:visited{color:#666666;}
.main_menu_gray A:hover{color:#666666;}
/* Main 메뉴 컬러버튼(활성상태) */
.main_menu_color{width:100; height:27; font-weight:bold; color:#ffffe8;}
.main_menu_color A:link{color:#ffffd8;}
.main_menu_color A:visited{color:#ffffd8;}
.main_menu_color A:hover{color:#ffffd8;}
/* Main 부속메뉴 */
.main_sub_div{color:#ffffff; display:none;}
.main_sub_div A:link{color:#ffffff;}
.main_sub_div A:visited{color:#ffffff;}
.main_sub_div A:hover{color:#ffccaa;}
/* Main 부속메뉴 확장 레이어 */
.btmlayercss{width:130; position:absolute; visibility:hidden; padding:4 0 4 3; color:#ffffff; background-color:#7694d0;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=2); z-index:100;}
.btmlayercss A{color:#ffffff;}
.btmlayercss A:visited{color:#ffffff;}
.btmlayercss A:hover{color:#ffccaa;}
.btmlayercss img{border-width:0;}
/* 좌측메뉴 title */
.LeftMenuTitle{color:#ffffff; font-weight:bold; font-family:Tahoma; font-size:8pt; width:130; FILTER:shadow(color=#333333,direction=180, strength=1);}
/* 좌측메뉴 text */
.MenuTextColor {color:#3a3a3a; line-height:150%;}
.MenuTextColor A:link{color:#3a3a3a;}
.MenuTextColor A:visited{color:#3a3a3a;}
.MenuTextColor A:hover{color:#ee6666;}
/* ★ 전체적인 영역분할 선이 출력되게 하려면 아래 두줄을 활성화 할것 */
/* div{border:1px solid #ff0000;} */
/* table{border:1px solid #0000ff;} */
</style>
<script language="javascript">
// Main 메뉴탭 기본 활성화 : [보드설정10-4] 에서 설정한 번호의 메뉴탭이 활성화 됨.(1~10)
main_tab_def='<?=$Bconfig[config_add4]?>';
// Main 메뉴탭 변환색상
main_tab_color=new Array(0,'#8bc96d','#b79ddd','#7694d0','#8ec8a2','#c680a1','#72bcd4','#477bff','#9ca5aa','#c9af7d','#f0856c');
// Main 메뉴탭 변환 display
chn_menu_num=0;
function main_tab_move(num){
if(!num) num=main_tab_def>0?main_tab_def:1;
if(chn_menu_num==num) return;
this_tab=document.getElementById('main_tab_id'+num); if(!this_tab) return;
this_tab_sub=document.getElementById('main_sub'+num);
for(i=1; i<=10; ++i){
if(i != num){
tmp_td_id=document.getElementById('main_tab_id'+i);
if(tmp_td_id && tmp_td_id.className!='main_menu_gray'){
tmp_td_id.style.backgroundImage='';
tmp_td_id.className='main_menu_gray';
}
}else{
this_tab.className='main_menu_color';
this_tab.style.backgroundImage="url(<?=$g4['path']?>/img/tab_button"+num+".gif)";
for(j=1; j<=10; ++j){
subtemp=document.getElementById('main_sub'+j);
if(subtemp) subtemp.style.display='none';
}
if(this_tab_sub){
this_tab_sub.style.display='inline';
document.getElementById('main_sub_table').style.backgroundColor=main_tab_color[num];
}
}
}
chn_menu_num=num;
}
// Main메뉴 내의 하위 레이어 컨트롤
function open_btm_layer(div_id,this_coord){
btmmenu_id=document.getElementById(div_id);
btmmenu_id.style.left=TnT_get_objLeft(this_coord)-10;
btmmenu_id.style.top=TnT_get_objTop(this_coord)+12;
btmmenu_id.style.visibility='visible';
btmmenu_id.style.backgroundColor=main_tab_color[chn_menu_num];
}
function close_btm_layer(){btmmenu_id.style.visibility='hidden';}
function hold_btm_layer(){btmmenu_id.style.visibility='visible';}
</script>
<!-- 메인메뉴 탭의 부속 메뉴(네비게이션)-->
<table width="980" id="main_sub_table" height="26" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="10"><img src="<?=$g4['path']?>/img/s_round_l2.gif" align="absmiddle" width="4" height="26" border="0"></td>
<td valign="bottom" style="padding-bottom:3px;">
<!-- 창업 -->
<div id="main_sub1" class="main_sub_div">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=est_base">창업의 이해</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=est_guide">창업 가이드</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=est_success">성공 사례</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=est_link">창업 관련 링크</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=est_board">창업 게시판</a>
</div>
<!-- 유통 -->
<div id="main_sub2" class="main_sub_div" style="padding-left:30;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=distr_items">아이템</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=distr_market">유통 시장</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=distr_supply">상품 공급</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=distr_demand">상품 수급</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=distr_board">유통 게시판</a>
</div>
<!-- 교육/질의 -->
<div id="main_sub3" class="main_sub_div" style="padding-left:60;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_asp">ASP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_css">CSS</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_c">C언어</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_flash">FLASH</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_html">HTML</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_java">JAVA</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_jsp">JSP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_perl">PERL</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_ps">PHOTOSHOP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_php">PHP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_sql">SQL</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_mp">동영상</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_photo">사진</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=educ_etc">기타</a>
</div>
<!-- 자료실 -->
<div id="main_sub4" class="main_sub_div" style="padding-left:90;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_asp">ASP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_c">C언어</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_java">JAVA</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_jsp">JSP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_perl">PERL</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_php">PHP</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_util">유틸리티</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_imgs">이미지</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=data_etc">기타</a>
</div>
<!-- 구인/구직 -->
<div id="main_sub5" class="main_sub_div" style="padding-left:120;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=job_offer">구인</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=job_hunter">구직</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=job_alba">아르바이트</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=job_etc">기타</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=job_damage">피해신고</a>
</div>
<!-- 제작(구축)의뢰 -->
<div id="main_sub6" class="main_sub_div" style="padding-left:150;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_hp">홈페이지</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_sm">쇼핑몰</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_solution">숄루션</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_prog">프로그램</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_design">디자인</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_mpic">동영상</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_flash">플래쉬</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_etc">기타</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=prod_damage">피해신고</a>
</div>
<!-- 홍보/선전 -->
<div id="main_sub7" class="main_sub_div" style="padding-left:180;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_wa">웹에이젼시</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_domain">도메인</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_hostiong">호스팅</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_manage">관리 대행</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_sm">쇼핑몰</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_solution">숄루션</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_pg">PG/택배</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_photo">사진/동영상</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_etc">기타</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=pub_damage">피해신고</a>
</div>
<!-- 커뮤니티 -->
<div id="main_sub8" class="main_sub_div" style="padding-left:210;">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_free">자유게시판</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_forum">포럼</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_gallery">갤러리</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_mp">동영상</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_book">책/만화</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_movie">영화/연극</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_music">음악/뮤지컬</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_sports">스포츠</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_game">게임</a> <img src="<?=$g4['path']?>/img/menu_div.gif" width="19" height="10" border="0">
<a href="<?=$g4['bbs_path']?>/board.php?bo_table=com_ski">스키</a>
</div>
<!-- ◈ 9 기타메뉴 -->
<div id="main_sub9" class="main_sub_div">내용없음9</div>
<!-- ◈ 10 기타메뉴 -->
<div id="main_sub10" class="main_sub_div">내용없음10</div>
</td>
<td width="5" align="right"><img src="<?=$g4['path']?>/img/s_round_r.gif" width="4" height="26" border="0" align="absmiddle"></td>
</tr>
</table>
<!-- 메인메뉴 기본 활성화 실행 -->
<script language="JavaScript"> main_tab_move("1"); </script>
<!-- 메인메뉴 밑 음영 -->
<table width="970" cellspacing="0" cellpadding="0" align="center" border="0">
<tr><td height="2" bgcolor="#cccccc"></td></tr>
<tr><td height="8" bgcolor="#ffffff"></td></tr>
</table>
데모사이트>
http://zenakr.aseyo.org/
다운로드사이트>
http://zeronara.net/