전에 한번 비슷하지만 좀 모자란듯한 소스를 올렸었는데요.

약간의 옵션을 넣어서 만들어 봤습니다.

설명을 하자면

- 가로로된 메뉴 바가 있구요 그 바속에 메뉴버튼이 있습니다. 하이퍼 링크걸려있구요

버튼에 마우스 오버시 그버튼 아래 작은 막대가 버튼의 위치로 이동합니다. 물론 슬라이딩하죠..

여기까지가 지난번 소스였는데요. 옵션을 넣은것은

버튼들이 처음 등장시 blendtrans 효과를 넣어 뿌스스 하게 등장합니다.

그리고 버튼의 사이즈에 따라 버튼밑의 막대가 슬라이딩함과동시에 사이즈가 늘었다 줄었다 합니다.

무슨뜻인지 아시겠죠? 플레쉬로 자주 보시던 겁니다. ( 플레쉬 못하는 관계로..-ㅁ- 수작좀 부렸습니다. )

아직은 남한테 가르쳐줄만한 실력은 못되지만 나름대로 열심히 했구요 원하시는 분들이 좀 계시면..

가로와 세로메뉴를 자유자제로 적용하게 할거구요 그담에 지금은 소스를 수정하셔야 합니다..아쉽게도..-ㅁ-;

수정없이 사용하게 하려면 이미지사이즈 자동측정해서 막대가 자유자재로 변하게도 해야할것같구

다만 실력부족과 그런기능이 있으면 느려질태구..그래서 걱정이네요.. 주석은 안달았습니다. 원하시는 분들이 없는거 같아서요

암튼 소스랑 예제 나갑니다.

=======================================================================================
----- 죄송합니다. 링크가 깨졌습니다. 이미지도 없구요..ㅡㅜ 예제는 못보실것 같네요..--------
예제) http://goweb.netcci.org/pds/menu.html
=======================================================================================

-------------------------------------------------------------------------------------------------------------


<script language="JavaScript" type="text/javascript">
<!--
var IconPos = 5; // 처음 페이지 로딩시 메뉴 밑의 슬라이딩 아이콘의 위치정의
var ReImage = 55; // " " " 넓이정의
//-->
</script>



<script language='javascript' type='text/javascript'>

<!--

function MM_preloadImages() { //v3.0 // 이미지를 모두 로딩후 페이지 표시
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function Fade(_id,_visibility) { // blendtrans효과를 위한 함수
document.all[_id].style.filter="blendTrans(duration=1)";
if(document.all[_id].filters.blendTrans.status != 1){
document.all[_id].filters.blendTrans.apply();
document.all[_id].style.visibility=_visibility;
document.all[_id].filters.blendTrans.play();
}
}


// 메뉴아이콘의 슬라이딩
var isRun = 0;
var Loop3 = null;
var MovingSpe = null;
var Speed1 = 4 /// 속도 입니다. 낮은 숫자일수록 빨리 움직입니다.
function MovingIcon(value){
isRun = 1;
if(Loop3)clearTimeout(Loop3);
var _id = "menu_mouse";
var Tmpvalue = value;
var Tmpvalue2 = value;
if(document.all[_id].style.pixelLeft <= Tmpvalue){
MovingSpd = Math.round((Tmpvalue-document.all[_id].style.pixelLeft)/Speed1);
if(MovingSpd == 0){
if(document.all[_id].style.pixelLeft < Tmpvalue){
MovingSpd = 1;
}
}
document.all[_id].style.pixelLeft += MovingSpd;
Loop3 = setTimeout("MovingIcon("+Tmpvalue+")",1);
}else if(document.all[_id].style.pixelLeft >= Tmpvalue2){
MovingSpd = Math.round((document.all[_id].style.pixelLeft-Tmpvalue2)/Speed1);
if(MovingSpd == 0){
if(document.all[_id].style.pixelLeft > Tmpvalue2){
MovingSpd = 1;
}
}
document.all[_id].style.pixelLeft -= MovingSpd;
Loop3 = setTimeout("MovingIcon("+Tmpvalue2+")",1);
}else clearTimeout(Loop3);
}


// Menu button의 등장
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var ArrDivs = new Array("menu_1","menu_2","menu_3","menu_4","menu_5"); //---- 메뉴의 갯수에 따라 배열값을 늘려주세요 ("menu_1",......"menu_10");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var ArrCounts = 0;
var tmp = null;
function ShowDiv2(){
clearTimeout(Loop);
//if(ArrCounts==ArrDivs.length){if(isRun==0){MovingIcon(IconPos);ResizeImage(ReImage);}}
if(ArrCounts<ArrDivs.length){
Fade(ArrDivs[ArrCounts],'visible');
ArrCounts++;
tmp = setTimeout("ShowDiv2()",150);
}else{if(tmp)clearTimeout(tmp);
if(isRun==0){
setTimeout("MovingIcon("+IconPos+")",1200);
setTimeout("ResizeImage("+ReImage+")",1200);
}
}
}

// Image 리사이즈
var Loop4 = null;

function ResizeImage(Size){
clearTimeout(Loop4);
var Resize = 2;
if(document.MenuIconImage.width>Size){
if(document.MenuIconImage.width-Size<2) Resize = 1;
else Resize = 2;
document.MenuIconImage.width -= Resize;
document.MenuIconImage.height = 4;
Loop4 = setTimeout("ResizeImage("+Size+")",1);
}else if(document.MenuIconImage.width<Size){
if(Size-document.MenuIconImage.width<2) Resize = 1;
else Resize = 2;
document.MenuIconImage.width += Resize;
document.MenuIconImage.height = 4;
Loop4 = setTimeout("ResizeImage("+Size+")",1);
}else clearTimeout(Loop4);
}

var Loop = setTimeout("ShowDiv2()",500);

-->
</script>


<!--
상자에서의 설정은 이렇습니다.
img 태그에 name이라는 속성이 있습니다. 화면에 표시된 순서대로 왼쪽부터 menu_1 menu_2.....menu_10 이렇식으로 td 추가시 써주셔야하구요
img 태그에 onMouseOver 이벤트가 들어있습니다. 이곳에들어가는 함수호출명령도 수정하셔야 할겁니다.
MovingIcon(이곳에 아이콘이 가야할 위치를 정해줍니다. 좌표값이죠.);ResizeImage(이곳에 아이콘의 넓이를 정해줍니다.)
이두가지 호출명령에 적절한값을 넣어서 사용하시면 됩니다.
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*******************************************************
기본적으로 메뉴는 다음과같이 나열되있습니다.
<td>여기서~ 이것하나가 메뉴의 버튼 한개를 나타냅니다. ~여기까지<td>
아래처럼 복사하셔서 메뉴를 늘리실것이라면 아래의 태그를 밑에 더 써넣어주시구요
<img 태그 안에는 onMouseOver와 name을 수정하시면 됩니다.
onMouseOver는
- MovingIcon(이곳에 슬라이딩바가 가야할 위치를 정해줍니다. 좌표값이죠.);ResizeImage(이곳에 슬라이딩바의 넓이를 정해줍니다.)
위처럼 수정하시면 되구요
name은
- menu_1 menu_2.....menu_10 순서대로 넣어주시면 됨니다.
**********************************************************
<td width='46'><a href='#'><img src='http://goweb.netcci.org/pds/main_image/menu_5.gif' alt='' onMouseOver="MovingIcon(638);ResizeImage(36)" name='menu_5' style='position:abolute;visibility:hidden' border='0'></a></td>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-->
<!-- 메뉴 상자 -->
<div id='menu_obj'>
<table border='0' bgcolor='#4B494B' width='682' background='http://goweb.netcci.org/pds/main_image/menu_bg.gif' style='border:1px solid #272727;border-bottom-color:#313131' cellpadding='0' cellspacing='0'>
<tr>
<td width='67'><a href='#'><img src='http://goweb.netcci.org/pds/main_image/menu_1.gif' alt='' onMouseOver="MovingIcon(4);ResizeImage(55)" name='menu_1' style='position:abolute;visibility:hidden' border='0'></a></td>
<td> </td>
<td width='50'><a href='#'><img src='http://goweb.netcci.org/pds/main_image/menu_2.gif' alt='' onMouseOver="MovingIcon(477);ResizeImage(42)" name='menu_2' style='position:abolute;visibility:hidden' border='0'></a></td>
<td width='38'><a href='#'><img src='http://goweb.netcci.org/pds/main_image/menu_3.gif' alt='' onMouseOver="MovingIcon(526);ResizeImage(31)" name='menu_3' style='position:abolute;visibility:hidden' border='0'></a></td>
<td width='73'><a href='#'><img src='http://goweb.netcci.org/pds/main_image/menu_4.gif' alt='' onMouseOver="MovingIcon(564);ResizeImage(66)" name='menu_4' style='position:abolute;visibility:hidden' border='0'></a></td>
<td width='46'><a href='#'><img src='http://goweb.netcci.org/pds/main_image/menu_5.gif' alt='' onMouseOver="MovingIcon(638);ResizeImage(36)" name='menu_5' style='position:abolute;visibility:hidden' border='0'></a></td>
</tr>
<tr>
<td colspan='6'><div id='menu_mouse' style='position:relative;left:5'><img src='http://goweb.netcci.org/pds/main_image/menu_mouse.gif' style='border:1px solid #272727;border-top:0px;border-bottom:0px' width='55' alt='' name='MenuIconImage' border='0'></div></td>
</tr>
</table>
</div>
<!-- 메뉴 상자 끝 -->

http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=vote&desc=desc&no=454<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>