본문 바로가기
Programming/Javascript

플래쉬 효과 메뉴

ing™ 2009. 8. 1. 12:01


<style type="text/css">
/* 대메뉴 */
.diz_menu { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; cursor:hand; font-weight:normal;}
a.diz_menu:link { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:normal; }
a.diz_menu:visited { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:normal; }
a.diz_menu:hover { font-size:7pt; color:#1375CA; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:bold; }
a.diz_menu:active { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:normal; }
.diz_menu_over { font-size:7pt; color:#1375CA; font-family:Tahoma; line-height:110%; padding-top:6px; cursor:hand; font-weight:bold}

/* 부메뉴 */
.diz_popmenu { font-family:돋움; font-size:9pt; color:#333333; background-color:FFFFFF; cursor:hand; padding-left:5px;}
.diz_popmenu_over { font-family:돋움; font-size:9pt; color:#FFFFFF; background-color:08246B; cursor:hand; padding-left:5px;}
</style>

<script LANGUAGE="JavaScript">
<!--
function set_submenu(obj) {
    var nLeft,nTop
    ph = 30 // 서브메뉴 상단위치 조절
    nLeft = event.x - event.offsetX + document.body.scrollLeft;
    nTop = event.y - event.offsetY + document.body.scrollTop;

    eval(obj+".style").posLeft = nLeft
    eval(obj+".style").posTop = nTop + ph;
    eval(obj+".style").display='block';
}

function show_submenu(obj) {
    eval(obj+".style").display='block';
}

function hide_submenu(obj) {
    eval(obj+".style").display='none';
}
//-->
</script>

<!-- 대메뉴 -->
<table border="0" cellpadding="0" cellspacing="0" height="35" bgcolor="white">
<tr align="center">
<td width="5">|</td>
<td width="130" id="menu1" onClick="location.href='http://phototour.tistory.com/category/엘체%27s%20이야기'" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu1');" onMouseOut="this.className='diz_menu';hide_submenu('submenu1')">엘체의 이야기</td>
<td width="5">|</td>
<td width="130" id="menu2" onClick="location.href='http://phototour.tistory.com/category/세계일주%20여행기'" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu2');" onMouseOut="this.className='diz_menu';hide_submenu('submenu2')">세계 일주 프로젝트</td>
<td width="5">|</td>
<td width="130" id="menu3" onClick="location.href='http://phototour.tistory.com/category/세계일주%20사진/영상전'" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu3');" onMouseOut="this.className='diz_menu';hide_submenu('submenu3')">사진&동영상</td>
<td width="5">|</td>
<td width="130" id="menu4" onClick="location.href='http://phototour.tistory.com/guestbook'" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu4');" onMouseOut="this.className='diz_menu';hide_submenu('submenu4')">방명록</td>
<td width="5">|</td>
<td width="130" id="menu5" onClick="location.href='http://phototour.tistory.com/category/▶후원%20Sponsor'" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu5');" onMouseOut="this.className='diz_menu';hide_submenu('submenu5')">후원</td>
<td width="5">|</td>

</tr>
</table>

 

<!-- 부메뉴 1번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu1" style="position:absolute; background:#00AEEF; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu1');" onMouseOut="hide_submenu('submenu1');">
<tr><td bgcolor="#FFFFFF">
 <table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/엘체%27s%20이야기/엘체%27s%20History'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">History</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/엘체%27s%20이야기/일기장'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">일기장</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/디자인으로%20건축여행'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">선축사진</a></td>
 </tr>
 </table>
</td></tr></table>

<!-- 부메뉴 2번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu2" style="position:absolute; background:#39B54A; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu2');" onMouseOut="hide_submenu('submenu2');">
<tr><td bgcolor="#FFFFFF">
 <table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20준비%26정보/준비물'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">준비&정보</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/Intro'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">Intro</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20Asia'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">아시아</a></td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20Europe'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">유럽</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20Africa'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">아프리카</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20Oceania'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">오세아니아</a></td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20North%20America'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">북미</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20Latin%20America'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">중남미</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20South%20Pole'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">남극</a></td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20여행기/in%20North%20Pole'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">북극</td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/엘체루트'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">GPS 루트</td>
 </tr>
 </table>
</td></tr></table>

<!-- 부메뉴 3번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu3" style="position:absolute; background:#DDC100; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu3');" onMouseOut="hide_submenu('submenu3');">
<tr><td bgcolor="#FFFFFF">
 <table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20사진/영상전/세계여행%20사진전'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">사진</a></td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/세계일주%20사진/영상전/세계여행%20영상전'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">동영상</a></td>
 </tr>
 </table>
</td></tr></table>

<!-- 부메뉴 4번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu4" style="position:absolute; background:#F889BA; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu4');" onMouseOut="hide_submenu('submenu4');">
<tr><td bgcolor="#FFFFFF">
 <table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/guestbook'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">방명록(격려하기)</a></td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/▶방문자참여공간/무료숙박%20알려%20주세요!!'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">유용 정보<br />(숙박, 자원봉사지...)</a></td>
 </tr>
 <tr>
  <td height='20' onClick="self.location='http://phototour.tistory.com/category/▶방문자참여공간/내가%20가본%20세계여행'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">여행 수기</a></td>
 </tr>
 </table>
</td></tr></table>
<!-- 부메뉴 5번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu5" style="position:absolute; background:#F889BA; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu5');" onMouseOut="hide_submenu('submenu5');">
<tr><td bgcolor="#FFFFFF">
 <table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
 <tr>
 <td height='20' onClick="self.location='http://phototour.tistory.com/category/▶후원%20Sponsor'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">후원</a></td>
 </tr>
 </table>
</td></tr></table>

티스토리툴바