DIV 드롭다운 메뉴(2)
저자：Eve Cole
업데이트 시간：2009-06-20 17:00:56
이 프로그램은 <head></head> 태그 사이나 웹 페이지의 어느 곳에나 배치할 수 있습니다.
다음으로 실제 메뉴 항목을 정의해야 합니다. 여기서는 각 메뉴 항목에 마우스 이동 이벤트(OnMouseOver) 핸들을 추가하고 이 이벤트가 위에서 정의한 Show 함수를 호출하도록 해야 합니다. 즉, 마우스가 메뉴 항목에 들어가자마자 표시 기능이 실행되기 시작합니다. 여기서는 각 메뉴 항목의 ID 번호를 정의하고 해당 드롭다운 메뉴 열의 ID 이름을 Show 함수에 전달해야 합니다. 이는 아래의 드롭다운 메뉴 열을 제어하는 데 중요합니다. 메뉴 항목의 ID 이름을 HTML 구문 설명으로 제공합니다.
<테이블 테두리=0>
<tr>
<td ID="d1" onmouseover="show(this,ds1);" class="menu">잡지 기술 사이트</td>
<td ID="d2" onmouseover="show(this,ds2);" class="menu">포털</td>
<td ID="d3" onmouseover="show(this,ds3);" class="menu">개인이 즐겨찾는 사이트</td>
</tr>
</table>
마지막으로 드롭다운 메뉴 열을 정의해야 합니다. 각 드롭다운 메뉴 열에 대해 하위 메뉴의 CSS 속성과 ID 이름을 지정하여 표시 기능이 제어할 수 있도록 해야 합니다. 마지막으로 기본 표시 모드를 없음으로 설정합니다. 표시됩니다. 이는 표시 스타일에 "없음"을 할당하면 달성됩니다. 아래에는 드롭다운 메뉴 열에 대한 HTML 구문 설명이 나와 있습니다.
<DIV ID="ds1" CLASS="하위 메뉴" STYLE="표시:없음">
<BR><A HREF="http:\www.yesky.com">tianji.com Yesky.com</A>
<BR><A HREF="http:\www.cbinews.com">컴퓨터 사업 정보</A>
<BR><A HREF="http:\www.newsoft.com.cn">뉴 패션 전자제품</A>
<BR>
</DIV>
<DIV ID="ds2" CLASS="하위 메뉴" STYLE="표시:없음">
<BR><A HREF="http:\www.sina.com.cn">시나 시나</A>
<BR><A HREF="http:\www.sohu.com.cn">소후소후</A>
<BR><A HREF="http:\www.163.com">넷이즈</A>
<BR>
</DIV>
<DIV ID="ds3" CLASS="하위 메뉴" STYLE="표시:없음">
<BR><A HREF="http:\haoel.yeah.net">마우스 네트워크 프로그래밍 스테이션</A>
<BR><A HREF="http:\www.5460.net">중국 동급생</A>
<BR><A HREF="http:\www.csdn.net">중국 소프트웨어 개발 네트워크</A>
<BR>
</DIV>
이것이 전체 과정입니다. 위의 네 단계를 거치면 메뉴를 웹 페이지에 올리면 확실히 아름답게 보일 것입니다. 물론, 메뉴 속성을 직접 변경하여 메뉴처럼 만들 수도 있습니다.
