67. 메뉴 관련 프로그램

67.1. 간단한 풀다운 메뉴

메뉴는 많고 표시할 공간이 적을 때 많이 사용하는 방식은 풀다운 메뉴 방식입니다. 보통 때는 좁은 공간에 간단한 메뉴 이름만 보여주다가 메뉴를 선택하면 많은 항목을 나열합니다. 이런 풀다운 메뉴 방식은 적은 공간을 차지하면서도 많은 메뉴 항목을 보여줄 수 있어 유용하게 사용됩니다.

풀다운 메뉴를 구현하는 가장 간단하면서도 쉬운 방법은 입력 양식의 <SELECT> 태그를 사용하는 것입니다. <SELECT> 태그를 사용하고 size 속성 값을 조절하면 좁은 공간을 이용해 많은 항목을 보여줄 수 있습니다.

ex4_01.html 은 가장 단순하지만 가장 많이 사용하는 풀다운 메뉴 방식입니다. 사용자가 메뉴를 선택하면 목록을 보여주고, 이 중 하나를 선택한 다음에 [문서 보기] 아이콘을 누르면 선택된 항목에 연결된 문서를 보여주는 프로그램입니다.

** 사진: 보통 때는 한 줄의 메뉴에 불과하지만 메뉴를 선택하면 여러 가지 항목이 나열됩니다. 여기에서 해당 제목을 선택하고 [문서 보기] 아이콘을 선택하면 연결된 문서를 보여줍니다. [타이핑 효과] 항목을 선택하자 ex1_01.html 문서를 보여줍니다.

** 살펴볼 부분
1. <FORM> 태그의 <SELECT> 태그의 size 값을 1로 설정하면 한 줄 짜리 메뉴가 됩니다. 2 이상으로 선택하면 두 개 이상의 항목을 보여주고, 스크롤 막대가 만들어집니다.
2. 첫 번째 <OPTION> 태그에는 현재 문서를 연결시켜 다시 이 문서를 불러오게 만들었습니다. 이렇게 한 이유는 첫 번째 <OPTION> 태그를 메뉴 제목 표시용으로 사용하기 위해서입니다.
3. 추가 할 항목은 <OPTION> 태그로 추가합니다.
4. <OPTION> 태그의 value 값에 문서 경로를 적으면 문서를 보여주고, 사이트의 URL 을 입력하면 해당 사이트로 접속하게 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex4_01.html - 간단한 풀다운 메뉴 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  간단한 풀다운 메뉴<BR>
  <FORM name="kform">
    <SELECT name="ksel" size=1>
    <OPTION value="ex4_01.html"> - 자바스크립트 예제 문서 - </OPTION>
    <OPTION value="ex1_01.html"> 타이핑 효과 </OPTION>
    <OPTION value="ex1_02.html"> 이동하는 글과 그림 </OPTION>
    <OPTION value="ex1_04.html"> 본문 밑으로 흐르는 글 </OPTION>
    <OPTION value="ex1_05.html"> 폭포 효과 </OPTION>
    </SELECT>
  <INPUT type="button" value="문서 보기" onclick="javascript:fform(this)">
  </FORM>
</BODY>
</HTML>

67.2. 메뉴에서 선택한 항목의 설명 보여주기

메뉴에서 어떤 항목을 선택했을 때 해당 문서를 불러오는 방법은 앞서 설명했습니다. ex4_01.html 문서를 이용하면 사용자가 선택한 문서를 보여주거나, 해당 사이트로 이동할 수 있습니다. 이 문서를 응용하여 사용자가 선택한 항목에 대한 설명을 보여주는 프로그램을 만들어보겠습니다.

일단 사용자가 선택한 양식의 배열 요소를 알아내는 과정은 같습니다. 여기에 사용자가 선택한 항목에 해당하는 설명 내용을 표 안에 보여주기만 하면 됩니다. 이를 위해서 ex1_10.html에서 사용한 마우스를 가져가면 설명 보여주기 기법을 적용합니다. 사용자가 선택한 배열 요소 번호를 이용하여 해당 문장이 기록된 배열을 대입시키는 것입니다.

ex4_02.html 문서는 사용자가 선택한 항목에 대한 보충 설명이 필요한 메뉴에 사용할 수 있습니다. 가수나 노래를 선택하면 가수 소개나 가사를 보여주는 용도로 사용할 수 있습니다. 또는 1장에서 20장 까지의 강의 내용을 보여주는 용도로 사용할 수도 있습니다. 단 분량이 많은 강의 내용은 배열에 기록해둘 수 없고, 별도의 문서로 기록해두어야 하므로 ex4_01.html에서 사용한 방법을 응용해야 합니다. 즉 <OPTION> 태그의 value 값에 URL을 기록한 다음에 지정된 프레임이나 영역에 문서 내용을 출력합니다.

** 사진: 메뉴에서 [컴국지] 항목을 선택하고 [책 소개 보기] 아이콘을 누르면 책 소개 내용이 하단의 표에 표시됩니다.

** 살펴볼 부분
1. agul 배열에 표시할 설명 내용을 대입합니다.
2. <FORM> 태그의 <SELECT> 태그의 size 값을 1로 설정하면 한 줄 짜리 메뉴가 됩니다. 2 이상으로 선택하면 두 개 이상의 항목을 보여주고, 스크롤 막대가 만들어집니다.
3. 추가 할 항목은 <OPTION> 태그로 추가합니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex4_02.html - 메뉴에서 선택한 항목의 설명 보여주기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  메뉴에서 선택한 항목의 설명 보여주기<BR>
  <FORM name="kform">
    <SELECT name="ksel" size=1>
    <OPTION > 컴국지 </OPTION>
    <OPTION > 신 하드웨어 팔만대장경 </OPTION>
    <OPTION > C언어 이야기 </OPTION>
    </SELECT>
  <INPUT type="button" value="책 소개 보기" onclick="javascript:fform(this)">
  </FORM>
  <BR>
  <TABLE width="300" height="300" border="2" bgcolor="ORANGE"> <TR> <TD  bgcolor="GOLD" valign="top">
    <DIV id="sgul"></DIV>
  </TD> </TR> </TABLE>
</BODY>
</HTML>

67.3. 트리 구조의 메뉴 만들기

메뉴 형식 중에는 윈도의 폴더 형식처럼 클릭할 때마다 서브 메뉴가 열리고, 상위 메뉴를 선택하면 하위 메뉴가 한꺼번에 닫히는 형식을 많이 사용합니다. 도스의 디렉토리 구조를 트리(tree) 구조라 부르고, 윈도98의 탐색기도 트리 구조를 이용하여 폴더를 검색합니다.

이런 트리 구조는 서브 메뉴 항목을 사용하지 않을 경우에는 하위 메뉴가 표시되지 않기 때문에 깔끔해보인다는 장점이 있습니다. 만약 모든 메뉴를 화면에 다 표시한다면 화면이 매우 복잡하게 보입니다. 트리 구조를 이용하여 사용할 메뉴만 열어서 표시하면 모든 서브 메뉴를 한 화면에 표시할 때보다 좀더 깔끔하게 보입니다.

트리 구조의 메뉴는 트리 구조를 가지는 자료를 표시할 때 좋습니다. 대표적인 것이 강좌 메뉴나 서브 메뉴가 있는 자료실 메뉴 등입니다. 화면에 모든 강좌 제목이나 자료실을 표시하지 않고 분류된 계층에 따라서 필요한 영역만 선택할 수 있습니다.

** 사진: 왼쪽의 꽃잎 아이콘을 클릭하면 서브 메뉴가 열리면서 트리 구조로 표시됩니다. 다시 아이콘을 클릭하면 열린 구조가 닫힙니다. 메뉴가 모두 펼쳐지면 화면이 매우 복잡해보이지만 메뉴가 닫혀있을 때는 매우 깔끔해보이는 것이 트리 구조의 장점입니다. 열린 서브 메뉴에서 ‘본문 밑으로 흐르는 글’ 메뉴를 선택하자 ex1_04.html 문서를 불러옵니다.

** 살펴볼 부분
1. <BODY> 태그 안의 필요한 영역에 보여주고자 하는 문서 제목과 링크 내용을 기록합니다.
2. <DIV> 태그의 포함 관계를 잘 살펴봐야 합니다. 상위 <DIV> 블록에서 이벤트가 일어나면 상위 <DIV> 블록 전체를 표시하거나 감추기 때문에 하위 <DIV> 블록도 함께 표시되거나 감추어집니다.
3. vid = srcElement.id + "v"; 명령은 그림의 id에 v자를 추가해서 목표 id로 설정하라는 뜻입니다. 예를 들어 <BODY> 태그 안에 다음과 같은 명령문이 있습니다.

<DIV id="d1v">
<IMG src="icon/i0101.gif" id="d2" class="cmenu" style="cursor: hand"> 1장

<DIV id="d2v" style="display:None">

최상위 <DIV>인 d1v 안에 포함된 그림 i0101.gif 파일을 보여주는 <IMG> 태그의 id는 d2입니다. vid = srcElement.id + "v"; 명령은 이 <IMG> 태그를 선택한 순간 d2라는 <IMG> 태그에 v자를 덧붙여서 목표 id의 id 값으로 설정한다는 뜻입니다. 따라서 목표로 삼는 id는 d2v가 됩니다. 그래서 d1v에 포함된 id가 d2v인 <DIV> 블록이 목표로 설정되고, d2v 블록이 열리는 것입니다. 그래서 상위 <DIV> 블록에 사용한 그림의 id는 바로 하위 <DIV> 블록의 id 이름에서 v자를 뺀 이름으로 설정한 것입니다.

**소스 파일:

67.4. 롤오버 기법의 표 메뉴(마우스 가져가면 색깔 바뀌는 표 메뉴)

마우스를 가져가면 그림이 바뀌는 롤오버 기법에 대해서는 책 본문에서 설명 드린 적이 있습니다. 그런데 매번 롤오버 기법에 사용할 그림을 만드는 일이 쉽지 않습니다. 그림을 만들기 힘들다면 아이콘이 아닌 표를 이용하여 롤오버 기법을 구현하는 것이 좋습니다.

표를 이용하여 롤오버 기법을 구현하면 마우스가 표의 영역에 들어오는 순간 지정된 색으로 바뀌고, 마우스가 벗어나면 원래의 색으로 바뀝니다. 표의 크기와 색만 잘 사용한다면 그림을 이용할 때보다 깔끔하면서도 단정한 느낌을 주는 메뉴를 만들 수 있습니다.

ex4_04.html은 표를 만들고 표에 롤오버 기법을 사용했습니다. 본 예제는 독자를 위해 글씨를 크게 사용해는데 실제로 홈페이지에 본 예제를 적용할 때는 표와 글씨의 크기를 줄이고, 색깔도 더욱 은은한 색으로 하는 것이 좋습니다. 또는 어두운 색 바탕에 흰색 글씨를 사용하는 것도 좋습니다. 링크된 문장에 나오는 밑줄을 없애기 위해 스타일에서 text-decoration:none; 으로 설정했습니다. 롤오버 기법의 표 메뉴는 잘 활용하면 아이콘을 이용하는 것보다 훨씬 좋은 효과를 얻을 수 있습니다.

** 사진: 처음의 표는 엷은 색 배경입니다. 마우스를 가져 간 곳의 표 영역은 빨간색으로 바뀝니다. 메뉴를 구성할 때 표만 가지고도 훌륭하게 메뉴를 만들 수 있습니다.

** 살펴볼 부분
1. 스타일 A 를 지정한 이유는 <A> 태그를 사용한 문장이 링크색으로 표시되고, 밑줄이 있는 상태로 나오면 보기 흉하기 때문입니다. 스타일에서 text-decoration 속성의 값을 none으로 설정하여 링크된 문장에 밑줄이 보이지 않게 처리했습니다.
2. 이벤트 핸들러를 이용하여 표에 마우스가 위치했나 안 했나를 판별하여 fover(), fout() 함수를 실행시킵니다. fover() 함수는 마우스가 표 위에 위치했을 때, fout() 함수는 벗어났을 때 실행될 함수들입니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex4_04.html - 롤오버 기법의 표 메뉴 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     function fover(vtd, vc) {             //마우스 들어오면 표의 셀 배경색 변경
       if (!vtd.contains(event.fromElement)) {
          vtd.bgColor = vc;
       }
     }
     
     function fout(vtd, vc) {              //마우스 벗어나면 표의 셀 배경색 변경
       if (!vtd.contains(event.toElement)) {
         vtd.bgColor = vc;
       }
     }

//--> </SCRIPT>
</HEAD>
<BODY>
  롤오버 기법의 표 메뉴<BR><BR>
   <TABLE width="450" height="40" border="0"> <TR>
     <TD width="150" align="center" bgcolor="lavender" onmouseover="fover(this, 'red');" onmouseout="fout(this, 'lavender');">
       <A HREF="ex1_01.html" target="_top"> ex1_01.html </A>
     </TD>
     <TD width="150" align="center" bgcolor="lightcyan" onmouseover="fover(this, 'red');" onmouseout="fout(this, 'lightcyan');">
       <A HREF="ex1_02.html" target="_top"> ex1_02.html </A>
     </TD>
     <TD align="center" bgcolor="lightgreen" onmouseover="fover(this, 'red');" onmouseout="fout(this, 'lightgreen');">
       <A HREF="ex1_03.html" target="_top"> ex1_03.html </A>
     </TD>
  </TR></TABLE>
</BODY>
</HTML>

67.5. 원하는 곳에 이동시킬 수 있는 메뉴

ex4_05.html 문서는 이동 가능한 메뉴입니다. 사용자가 메뉴의 제목 표시선에서 마우스를 클릭하면 메뉴가 마우스를 따라 이동합니다. 사용자가 적당한 위치에서 더블클릭하면 그 자리에 메뉴가 위치하게 됩니다.

실제로 사용할 일이 많지는 않지만 이동 메뉴를 구현하고자 하는 분이라면 참고가 될 만한 프로그램입니다.

** 사진: 마우스로 메뉴를 한 번만 클릭하면 메뉴가 마우스를 따라 이동합니다. 적당한 위치에서 더블클릭하면 메뉴가 그 자리에 놓입니다.

** 살펴볼 부분
1. <BODY> 태그 안의 <TABLE> 태그 안에 필요한 메뉴와 링크 내용을 기록하면 됩니다.
2. 메뉴의 색이나 글꼴 등은 스타일이나, 표 관련 속성, <FONT> 태그를 이용하여 설정합니다. 예를 들어 메뉴의 링크 밑줄을 없애려면 스타일에서 text-decoration:none; 으로 설정합니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex4_05.html - 원하는 곳에 이동시킬 수 있는 메뉴 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     function fcheck() {
       fset();
       movemenu();
     }
     
     function fset() {
       vpl=".pixelLeft="; vpt=".pixelTop="; vsp=""; vsty=".style";
       mtableX="mtable11"
       XX=-70;
       YY=-70;
       ot=11;
     }
     
     function setmtable(a) {
       mtableX="mtable"+a;
       ot=a;
       XX=eval("xpos"+a);
       YY=eval("ypos"+a);
     }
     
     function rmtable() {
       check="no";
       mtableX="mtable11";
       document.close();
     }
     
     function movemenu() {
       eval(vsp + mtableX + vsty + vpl + Xpos);
       eval(vsp + mtableX + vsty + vpt + Ypos);
     }
     
     var isIE = (navigator.appName.indexOf("Microsoft") !=-1);
     check="no";

function mmove(e) {
       Xpos = event.clientX
       Ypos = event.clientY;
       if (check=="no") {
         diffX=XX-Xpos;
         diffY=YY-Ypos;
         check="yes";
         if (mtableX=="mtable11") check="no";
       }
       Xpos+=diffX;
       Ypos+=diffY;
       if (ot=="1") xpos1=Xpos,ypos1=Ypos;
       movemenu();
     }

xpos1=50;  
     ypos1=50;  
     xpos11 = -50;
     ypos11 = -50;
     Xpos=5;
     Ypos=5;
     document.onmousemove = mmove;
     document.ondblclick = rmtable;
   //--> </SCRIPT>
</HEAD>
<BODY onload="fcheck()">
  원하는 곳에 이동시킬 수 있는 메뉴<BR><BR>
  <DIV id="mtable1" style="position:absolute; visibility:show; left:50px; top:50px;   z-index:2">
  <TABLE bgcolor="ORANGE" border="1"> <TR>
  <TD bgcolor="GOLD" align="center"> <A HREF="javascript:void(0)" onmousedown="setmtable(1)"> <FONT style="text-decoration:none;"> 이동하기 </FONT> </A> </TD> </TR>
  <TR> <TD bgcolor="CORNSILK" align="center">
  <A HREF="http://www.x119.co.kr" target="_blank"> X119 사이트로 가기 </A><BR>
  <A HREF="http://www.agadal.com" target="_blank"> 아가달 사이트로 가기 </A><BR>
  <A HREF="http://www.help119.com" target="_blank"> HELP119 사이트로 가기 </A> <BR><BR>
  <A HREF="ex4_05.html"> 문서 첫 줄로 가기 </A><BR>
  </TD>
  </TR>
  </TABLE>
  </DIV>
  <DIV id="mtable11" style="position:absolute; visibility:show; left:-70px;   top:-70px; z-index:2">
  </DIV>
  </BODY>
</HTML>