홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

자바 스크립트로 구성하는 메뉴

dakzzi      조회 수 2165 추천 수 0 2009.04.13 23:45:03


<HTML>
<HEAD>
<TITLE>가자 자바스크립트 세상으로/마소 메뉴</TITLE>
<META content="text/html; charset=windows-1251" http-equiv=Content-Type>

<STYLE type=text/css>#menu {
        BACKGROUND: lightblue; COLOR: black; CURSOR: default; FONT-FAMILY: verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold
}
#menu .popup {
        BACKGROUND: lightblue; BORDER-BOTTOM: lightblue 12px solid; BORDER-LEFT: lightblue 12px solid; BORDER-RIGHT: lightblue 12px solid; BORDER-TOP: lightblue 12px solid; DISPLAY: none; FONT-FAMILY: verdana; FONT-SIZE: 8px; POSITION: absolute; WIDTH: 160pt
}
#menu P {
        MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt
}
A:hover {
        COLOR: red; TEXT-DECORATION: none
}
A {
        COLOR: black; FONT-SIZE:8pt; MARGIN: 5px; TEXT-DECORATION: none
}
UL {
        COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
LI {
        COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
P {
        COLOR: black; FONT-SIZE: 10pt; MARGIN: 5px; TEXT-DECORATION: none
}
.over {
        COLOR: red
}
P {
        TEXT-ALIGN: justify; TEXT-INDENT: 0.1in
}
</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>

</HEAD>
<BODY onclick=clearCurrent() bgcolor="#000080">
<DIV style="BACKGROUND: lightblue; WIDHT: 100%">
<TABLE border=0 id=menu onclick=popup() onmouseout=highlight();
onmouseover=highlight();>
  <TBODY>
  <TR>
    <TD>
      <a href="http://java.up2.co.kr">첫번째 하위메뉴 없이구현</a></TD>
    <TD bgColor=black></TD>
    <TD>
      <P>두번째 칸 메뉴</P>
      <DIV class=popup>
      <P><a class="anchor" href="http://java.up2.co.kr">두번째 칸 하위 메뉴 1</a>
      <P> <P><a href="http://yahoo.co.kr">두번째 칸 하위 메뉴 2</a>
      </P></DIV></TD>
    <TD bgColor=black></TD>
    <TD>
      <P>세번째 메뉴</P>
      <DIV class=popup>
      <P><A href="http://www.javascripts.">세번째 하위메뉴 1</A>
      <P><A href="http://www.learnasp.com">세번째 하위메뉴 2</A>
          <P><A href="http://www.javasoft.com">세번째 하위메뉴 3</A>
          <P><A href="http://www.inprise.com">세번째 하위메뉴 4</A>
          
          </P></DIV></TD>
    <TD bgColor=black></TD>
    <TD>
      <P>네번째 메뉴</p>
      <DIV class=popup>
          <P><A href="mailto:aaa@aaa.com">네번째 하위메뉴 1</A>
          </p></div>
    </TD></TR></TBODY></TABLE></DIV>
<P></P>

--------------------------------------------------------------------------------------------------------------
위처럼 하면 가로 한줄에 칸칸이 나오면서 아래표의 영향없이 겹치게 할수 있을것으로 기대함.

List of Articles
번호 제목 글쓴이 날짜 조회 수
12 XE 게시판 모양 수정 정보 세상이야기 2010-01-12 3026
11 XE 포인터 출력 설정 세상이야기 2010-01-10 1859
10 XE 설정 정보를 담고 있는 파일 세상이야기 2010-01-09 2515
9 링크 점선 테두리 없애기 세상이야기 2010-01-06 2057
8 XE 플래쉬파일을 헤더와 푸터에 넣기 file [2] 세상이야기 2010-01-03 3253
7 XE 목록에서 첨부파일 아이콘 삭제하기 [1] 세상이야기 2009-12-27 3298
6 마우스 오른쪽 막기 dakzzi 2009-07-07 2196
» 자바 스크립트로 구성하는 메뉴 dakzzi 2009-04-13 2165
4 좋은 색상들.. dakzzi 2009-02-13 1904
3 웹칼라 색상표 file dakzzi 2008-11-20 3467
XE Login