메뉴·네비게이션

소걸음 2009. 3. 19. 13:52

프레임에서 사용하면 공간을 절약할 수 있는 폴더 트리형 메뉴 스크립트 입니다
압축 파일을 해제한 후 js 파일에서 메뉴를 설정 하세요

##########
index.html
##########

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<style>
<!--
body,td{font-size:10pt}
//-->
</style>

<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->

<script src="tree_2.js"></script>

</head>

<body>

<!--- [2단계] 아래의 코드를 메뉴가 나타나기 원하는 장소에 넣으세요 --->

<script language="JavaScript">initializeDocument();</script>

</body>
</html>

############################
tree_2.js 파일중 메뉴 설정 부분
############################

function gLnk(target, description, linkData, itemImg)
{
  fullLink = ""

  if (target==0)
  {
    if(linkData != "")
        fullLink = "'"+linkData+"' target="_self"" // 원하는 타겟으로 수정하세요
    else
        fullLink = "";
  }
  else
  {
    if (target==1) {
       if(linkData != "")
           fullLink = "'http://"+linkData+"' target=_self" // 원하는 타겟으로 수정하세요
       else
           fullLink = "";
      
    }
    else {
       if(linkData != "")
           fullLink = "'http://"+linkData+"' target="_self"" // 원하는 타겟으로 수정하세요
       else
           fullLink = "";

    }
  }

  linkItem = new Item(description, fullLink, itemImg)  
  return linkItem
}

function insFldr(parentFolder, childFolder)
{
  return parentFolder.addChild(childFolder)
}

function insDoc(parentFolder, document)
{
  parentFolder.addChild(document)
}


USETEXTLINKS = 1;
indexOfEntries = new Array;
nEntries = 0;
doc = document;
browserVersion = 0;
selectedFolder=0;

///////////////////////////// 메뉴 설정 부분 ////////////////////////////////

foldersTree = gFldr("메뉴를 선택 하세요",  "kkk")

aux1 = insFldr(foldersTree, gFldr("메인메뉴 -1","kkk"))
   insDoc(aux1, gLnk(0, "Script 1",  "http://kr.yahoo.com", "leftfolderclosed.gif"))
   insDoc(aux1, gLnk(0, "Script 2",  "http://kr.yahoo.com", "leftfolderclosed.gif"))
   insDoc(aux1, gLnk(0, "Script 3",  "http://kr.yahoo.com", "leftfolderclosed.gif"))

aux1 = insFldr(foldersTree, gFldr("메인메뉴 -2","lll"))
   insDoc(aux1, gLnk(0, "Applet 1",  "http://kr.yahoo.com", "leftfolderclosed.gif"))
   insDoc(aux1, gLnk(0, "Applet 2",  "http://kr.yahoo.com", "leftfolderclosed.gif"))
   insDoc(aux1, gLnk(0, "Applet 3",  "http://kr.yahoo.com", "leftfolderclosed.gif"))

aux1 = insFldr(foldersTree, gFldr("메인메뉴 -3","mmm"))
   insDoc(aux1, gLnk(0, "홈페이지마법사",  "http://kr.yahoo.com", "leftfolderclosed.gif"))

insDoc(foldersTree, gLnk(0, "부메뉴 없는 메뉴",  "http://kr.yahoo.com/", "leftfolderclosed.gif"))

///////////////////////////// 메뉴 설정 부분 ////////////////////////////////

 
 
 

메뉴·네비게이션

소걸음 2009. 3. 19. 13:52

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>마소 메뉴</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987">
<STYLE type=text/css>#menu {
        FONT-WEIGHT: bold; FONT-SIZE: 10pt; BACKGROUND: 3399ff; CURSOR: default; COLOR: 3399ff; FONT-FAMILY: 굴림
}
#menu .popup {
        BORDER-RIGHT: 3399ff 12px solid; BORDER-TOP: 3399ff 12px solid; DISPLAY: none; FONT-SIZE: 10px; BACKGROUND: 3399ff; BORDER-LEFT: 3399ff 0px solid; WIDTH: 130pt; BORDER-BOTTOM: 3399ff 12px solid; FONT-FAMILY: 굴림; POSITION: absolute
}
#menu P {
        MARGIN-TOP: 0pt; MARGIN-BOTTOM: 0pt
}
A:hover {
        COLOR: ffcc00; TEXT-DECORATION: none
}
A {
        FONT-SIZE: 10pt; MARGIN: 1px; COLOR: white; TEXT-DECORATION: none
}
UL {
        FONT-SIZE: 10pt; MARGIN: 1px; COLOR: white; TEXT-DECORATION: none
}
LI {
        FONT-SIZE: 10pt; MARGIN: 1px; COLOR: 3399ff; TEXT-DECORATION: none
}
P {
        FONT-SIZE: 10pt; MARGIN: 1px; COLOR: white; TEXT-DECORATION: none
}
.over {
        COLOR: ffcc00
}
P {
        TEXT-INDENT: 0.1in; TEXT-ALIGN: justify
}
</STYLE>

<SCRIPT language=JavaScript>
         var curPop = null;
         function clearCurrent() {
            // Hide the pop-up menu that is currently displayed.
            if (null != curPop)
               curPop.style.display = "";
            curPop = null;
         }

         function popup() {
                         clearCurrent();         
            var el = event.srcElement;
            // Display a new menu option.
            if (("P" == el.tagName) &&
                  ("menu" == el.parentElement.parentElement.parentElement.parentElement.id)) {
               // Position and display the pop-up menu.
               var elpop = document.all[el.sourceIndex + 1];
               elpop.style.pixelLeft = el.parentElement.offsetLeft+7;
               elpop.style.pixelTop  = el.offsetTop +
                  document.all.menu.offsetTop+22;
               elpop.style.display = "block";
               curPop = elpop;
            }
            event.cancelBubble = true;
         }

         function highlight() {
               
            // Highlight and popup  the menu options.
            if (null != event.fromElement)
               if ((event.fromElement.tagName == "P") &&
                                  (event.fromElement.parentElement.parentElement.parentElement.parentElement.id == "menu"))
                                  {
                  event.fromElement.className = "";
                      }
           
            if (null != event.toElement)
               if ((event.toElement.tagName == "P") && (event.toElement.parentElement.parentElement.parentElement.parentElement.id == "menu"))
                                {
                                  popup();                                       
                  event.toElement.className = "over";
                                }
         }               
               
      </SCRIPT>

<META content="MSHTML 5.50.4522.1800" name=GENERATOR></HEAD>
<BODY onclick=clearCurrent() TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<DIV style="BACKGROUND: 3399ff; WIDHT: 100%">
<TABLE id=menu onmouseover=highlight(); onclick=popup() onmouseout=highlight();
border=0>
  <TBODY>
  <TR>
    <TD><A href="http://cosy.dacome.co.kr/">홈페이지</A></TD>
    <TD bgColor=white></TD>
    <TD>
      <P>HD Studios 메뉴 </P>
      <DIV class=popup>
      <P><A class=anchor href="http://cosy.dacome.co.kr/">홈페이지 제작 </A>
      <P><A href="http://cosy.dacome.co.kr/">플래시 강좌</A>
      <P><A href="http://http://cosy.dacome.co.kr">자바스크립트</A> </P></DIV></TD>
    <TD bgColor=white></TD>
    <TD>
      <P>커뮤니티</P>
      <DIV class=popup>
      <P><A href="http://http://cosy.dacome.co.kr">자유게시판</A>
      <P><A href="http://http://cosy.dacome.co.kr">플래시 질문란</A>
      <P><A href="http://www.javasoft.com/">Cool 플래시사이트</A>
      <P><A href="http://www.inprise.com/">플래시TOP50</A> </P></DIV></TD>
    <TD bgColor=white></TD>
    <TD>
      <P>Contact with me</P>
      <DIV class=popup>
      <P><A href="mailto:lion93@kornet.net">저에게 메일을</A> </P></DIV>
    <TD bgColor=white></TD>
      <P></P></TD></TR></TBODY></TABLE></DIV>
<P></P></BODY></HTML>

 
 
 

메뉴·네비게이션

소걸음 2009. 3. 19. 13:51

NS 4.0 이상 / IE 4.0 이상

<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { color: red; text-decoration: underline }
a.plain:hover { font-size:10pt; color: yellow; text-decoration: underline }

#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
#mnubar {font:10pt arial; font-weight:bold }

</style>

<script language="JavaScript">
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"

function openIt(x) {

// NS 의 경우

if(ns) {
   showbox= document.layers[x+1]
     showbox.visibility = "show";
       showbox.top=44;
      
    var items = 5      ; // 메뉴의 갯수
     for (i=1; i<=items; i++) {
      elopen=document.layers[i]
        if (i != (x + 1)) {
          elopen.visibility = "hide" }
            }
  }   

// IE 일 경우

if(ie) {
   curEl = event.toElement
   curEl.style.background = "yellow"   // 마우스 오버시 배경색

   showBox = document.all.box[x];
     showBox.style.visibility = "visible";
        showBox.style.top = 46;  // 서브메뉴의 위쪽여백
        
   var items = 5  // 메뉴의 갯수
    for (i=0; i<items; i++) {
      elOpen=document.all.box[i]
       barEl=document.all.mnubar[i]
        if (i != x){
          elOpen.style.visibility = "hidden"
          barEl.style.background = "red" // 비활성메뉴 배경색
                  }
     }
   }
}

function closeIt() {
   var items = 5 // 메뉴의 갯수
     for (i=0; i<items; i++) {
       if(ie){
        document.all.box[i].style.visibility = "hidden"
          barEl=document.all.mnubar[i]
           barEl.style.background = "red"
       }
       if(ns){ document.layers[i+1].visibility = "hide"}          
}
}

</script>
</HEAD>

<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->

<BODY BGCOLOR="#FFFFFF" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->


<table border="0" cellpadding="0" width="800" bgcolor="red" height="18" id=mainmenu>

<tr>
<td align="center" nowrap valign="middle" colspan="7" bgcolor="#000000" >
  <p align="left"><b><font size="3" face="굴림" color="white">아래 메뉴 네비게이션바에 마우스를 대어 보세요</font></b></td>

</tr>

<tr>
<td align="center" ><a href='http://www.kkk.co.kr' onmouseover="closeIt()" class=plain>Home</a></td>

<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</a><br></td>

<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</a><br></td>

<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)"  id=mnubar>Menu 3</a><br></td>

<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)"  id=mnubar>Menu 4</a><br></td>
   
<td align="center" nowrap >
<a href="#" onmouseover="openIt(4)"  id=mnubar>Menu 5</a><br></td>

<td align="center" width="30" nowrap valign="top"> </td>
</tr>
</table>
<br><br>



<!-- 서브메뉴 1 -->

<div id=box style=left:120> <!--왼쪽에서 120픽셀-->
<table border="0" id=bluebox >      
<tr><td><a href='#' >SUB-1-1</a></td>
<td><a href='http://www.kkk.co.kr'>SUB-1-2</a></td></tr>
     </table>
</div>


<!-- 서브메뉴 2 -->

<div id=box style=left:200>
<table border="0" id=limebox> <tr>    
<td><a href='http://www.kkk.co.kr'>SUB-2-1</a></td>
<td><a href='somepage.htm' >SUB-2-2</a></td>
<td><a href='somepage.htm' >SUB-2-3</a></td></tr>
   </table>
</div>

<!-- 서브메뉴 3 -->

<div id=box style=left:240>
<table border="0" id=bluebox>      
<tr><td><a href='somepage.htm' >SUB-3-1</a></td>
<td><a href='somepage.htm' >SUB-3-2</a></td>
<td><a href='somepage.htm' >SUB-3-3</a></td>
<td><a href='somepage.htm' >SUB-3-4</a></td>
<td><a href='somepage.htm' >SUB-3-5</a></td></tr>  
</table>
</div>

<!-- 서브메뉴 4 -->

<div id=box style=left:400>
<table border="0" id=limebox>      
<tr><td><a href='somepage.htm' >SUB-4-1</a></td>
<td><a href='somepage.htm' >SUB-4-2</a></td>
<td><a href='somepage.htm' >SUB-4-3</a></td>
<td><a href='somepage.htm' >SUB-4-4</a></td></tr>
   </table>
</div>

<!-- 서브메뉴 5 -->

<div id=box style=left:520>
<table border="0" id=bluebox>      
<tr><td><a href='somepage.htm' >SUB-5-1</a></td>
<td><a href='somepage.htm' >SUB-5-2</a></td>
<td><a href='somepage.htm' >SUB-5-3</a></td></tr>
  </table>
</div>