<html>
<head></head>
<body>
<style>
<!-- 아래에 메뉴 추가방법과 스타일시트 추가방법이 있음 //-->
<!--
#tag_menu_a {width: 100; height: 20; border-width: 1; border-color: black; border-style: solid; z-index: 10}
#tag_menu_aa {width: 100; height: 20; position: absolute; top: 50; left: 100; z-index: 9}
#tag_menu_b {width: 100; height: 20; border-width: 1; border-color: black; border-style: solid; z-index: 12}
#tag_menu_bb {width: 100; height: 20; position: absolute; top: 50; left: 200; z-index: 11}
#tag_menu_c {width: 100; height: 20; border-width: 1; border-color: black; border-style: solid; z-index: 14}
#tag_menu_cc {width: 100; height: 20; position: absolute; top: 50; left: 300; z-index: 13}
#tag_menu_d {width: 100; height: 20; border-width: 1; border-color: black; border-style: solid; z-index: 16}
#tag_menu_dd {width: 100; height: 20; position: absolute; top: 50; left: 400; z-index: 15}
#tag_menu_e {width: 100; height: 20; border-width: 1; border-color: black; border-style: solid; z-index: 18}
#tag_menu_ee {width: 100; height: 20; position: absolute; top: 50; left: 500; z-index: 17}
//-->
</style>
<script language="JavaScript">
<!--
var where_to;
var the_timeout;
function moveIt() {
if (background_tag.style.left<where_to) {
background_tag.style.left=parseInt(background_tag.style.left) + 10;
}
if (background_tag.style.left>where_to) {
background_tag.style.left=parseInt(background_tag.style.left) - 10;
}
the_timeout = setTimeout('moveIt()', 10);
}
function getOverIt(the_tag) {
clearTimeout(the_timeout);
moveIt();
where_to=the_tag.style.left;
}
//-->
</script>
<!--
이동되는 배경색 레이어
배경색 설정은 style="background: #dfdfff; ~~~~"에서 이 #dfdfff가 배경색으로
이 #dfdfff를 지우고 원하는 배경색을 적으면 된다.
//-->
<div id="background_tag" style="background: #c9ff1e; width: 100; height: 20; position: absolute; top: 50; left: 100; z-index: 8"></div>
<!--
메뉴 추가방법
<div id="X" onMouseOver="getOverIt(X);" style="position: absolute; top: 50; left: 100"></div>
<div align="center" id="Xx"> Y </div>
위 소스를 복사하여 만들려는 갯수만큼 복사하고
2개의 X부분에 레이어의 이름(이라고 하겠뜸)을 적는다
그리고 Xx부분에도 (다른)이름을 적어준다
X와 Xx에 이름을 다 적었으면 top와 left의 값을 바꿔서 레이어의 위치를 맞추고는
스타일시트에 만든 메뉴의 갯수만큼 아래의 소스를 복사한다
#X {width: 100; height: 20; border-width: 1; border-color: black; border-style: solid; z-index: 10}
#Xx {width: 100; height: 20; position: absolute; top: 50; left: 100; z-index: 9}
스타일시트에 소스를 다 붙었으면 X와 Xx에 적은 이름을 스타일시트에도 적어주고
메뉴의 크기와 레이어의 위치를 맞추고 또 X의 z-index, Xx의 z-index의 값을 적어주면 된다.
여기서 X와 Xx의 z-index의 값은 X 부분에 10을 적으주면 Xx부분엔 9를 적어준다..
그러니 X의 값 -1이 Xx의 값이다.
또 메뉴의 크기를 바꾸면 위 이동되는 배경색 레이어의 크기도 바꿔야함..
마지막으로 Y부분에 원하는 소스를 적으면된다.
//-->
<div id="tag_menu_a" onMouseOver="getOverIt(tag_menu_a);" style="position: absolute; top: 50; left: 100"></div>
<div align="center" id="tag_menu_aa"><a href="#">Menu 1</a></div>
<div id="tag_menu_b" onMouseOver="getOverIt(tag_menu_b);" style="position: absolute; top: 50; left: 200"></div>
<div align="center" id="tag_menu_bb"><a href="#">Menu 2</a></div>
<div id="tag_menu_c" onMouseOver="getOverIt(tag_menu_c);" style="position: absolute; top: 50; left: 300"></div>
<div align="center" id="tag_menu_cc"><a href="#">Menu 3</a></div>
<div id="tag_menu_d" onMouseOver="getOverIt(tag_menu_d);" style="position: absolute; top: 50; left: 400"></div>
<div align="center" id="tag_menu_dd"><a href="#">Menu 4</a></div>
<div id="tag_menu_e" onMouseOver="getOverIt(tag_menu_e);" style="position: absolute; top: 50; left: 500"></div>
<div align="center" id="tag_menu_ee"><a href="#">Menu 5</a></div>
</body>
</html>
펌 - http://happyscript.com
'인터넷정보' 카테고리의 다른 글
| 레이어 가운데 위치시키기 (0) | 2007.10.17 |
|---|---|
| 레이어 가운데 위치시키기 (0) | 2007.10.17 |
| CSS와 자바스크립트로 만든 간단하고 깔끔한 메뉴 (0) | 2007.10.17 |
| CSS와 자바스크립트로 만든 간단하고 깔끔한 메뉴 (0) | 2007.10.17 |
| 메뉴에 마우스오버시 배경색이 이동하면서 바뀌는 스크립트 (0) | 2007.10.17 |
| 레이어 사용시 Select 객체에 가려지는 문제에 대한 해결책 (0) | 2007.10.17 |
| 레이어 사용시 Select 객체에 가려지는 문제에 대한 해결책 (0) | 2007.10.17 |
| 마우스커서 회전시키기 (0) | 2007.10.17 |
| 마우스커서 회전시키기 (0) | 2007.10.17 |
| 이미지 업로드 미리보기 기능 (0) | 2007.10.17 |