웹 페이지의 Javascript 디자인 드롭다운 메뉴-JS 튜토리얼-php.cn

웹 페이지의 Javascript 디자인 드롭다운 메뉴

黄舟

풀어 주다： 2016-12-21 15:24:15

원래의

1553명이 탐색했습니다.

　　在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清晰，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。　　下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常，只有菜单条显示在窗口中，并且当鼠标指针指向菜单条时，菜单条的子菜单才显示出来。当鼠标指针离开菜单时，子菜单则隐藏起来，回到只显示主菜单条的状态。

　　根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。

　　

　　菜单项一

　　菜单项二

　　……

　　

　　

　　接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加
换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=' display:none; z-index:9;'。注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。

　　

위 단계 이후에 드롭다운 메뉴의 형식이 정의되었습니다.

마우스가 메인 메뉴 바로 이동하면 해당 하위 메뉴가 표시되어야 합니다. 메인 메뉴의 onmouseover 이벤트에 대한 응답으로 doMenu(MenuID)를 실행하면 됩니다. 프로세스의 매개변수 MenuID는 해당 프로세스가 실행되면 window.event.cancelBubble = true가 먼저 설정되고, 왼쪽 상단과 하단을 포함하여 하위 메뉴 표시 위치가 계산됩니다. 오른쪽 모서리 좌표. 그런 다음 다음 명령문을 실행하여 하위 메뉴가 있는 영역을 표시합니다.

CurMenu.style.clip = "ect(0 0 0 0) "; CurMenu.style.display = "block"

마우스가 메인 메뉴 밖으로 나가는 경우는 두 가지가 있습니다. 하나는 마우스가 하위 메뉴와 메인 메뉴 사이를 이동할 때이고, 다른 하나는 마우스가 하위 메뉴를 숨길 수 없는 경우입니다. 이 때 하위 메뉴와 해당 메인 메뉴 영역 밖으로 이동합니다. 메인 메뉴의 onmouseout 이벤트에 응답하기 위해 hideMenu()를 실행하고, 동시에 하위 메뉴가 위치한 영역의 onmouseout 이벤트에 응답하기 위해 hideMenu()를 실행함으로써 이를 완료합니다.

웹 페이지의 다른 두 함수 mouseout() 및 mouseover()의 기능은 매우 간단하며 마우스가 움직일 때 메뉴 항목의 색상 변경을 처리하는 데 사용됩니다.

전체 소스 코드는 "전자 및 컴퓨터" 웹사이트 www.pccomputing.com.cn을 참조하세요.

웹 브라우징의 효과는 그림 1과 같습니다. 실행 환경은 IE4.0 이상입니다.

　(사진참고 WANGYE)

　 /TITLE>

　 " >

　var IsDroped =false; )

　{

　 window.event.srcElement.style.color = 'white'; // 마우스를 켰을 때 흰색으로 설정 이동됨

　}

function mouseover()

　{

　 window.event.srcElement.style.color = 'red' // 설정 마우스가 입력되면 빨간색 // 마우스가 입력되면 빨간색으로 설정

　}

기능 doMenu(MenuID)

드롭다운 메뉴가 이미 표시되어 있으면 다시 그려지지 않습니다.

if (IsDroped==true)

{

window.event.cancelBubble = true;

return false;
}

window.event.cancelBubble = true;

TempMenu = CurMenu;

//드롭다운 메뉴의 위치 계산

x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;

x2 = x + window.event.srcElement.offsetWidth

y = pad .offsetHeight ;

CurMenu.style.top = y;

CurMenu.style.left = x;";

CurMenu.style.display = "차단";

//기본 메뉴에서 아래로 이동하지 않도록 ToolbarMenu.offsetHeight에 값이 있는지 확인하기 위해 메뉴를 표시하기 전에 2밀리초를 지연합니다. 메뉴가 나타나면 드롭다운 메뉴가 사라집니다.

window.setTimeout ("showMenu()", 2);

return true;

function showMenu( )

　{

　 y2 = y + TempMenu.offsetHeight;

　 TempMenu.style.clip = "ect(auto auto auto auto)";

IsDroped =true;//드롭다운 메뉴가 표시되었습니다

　}

　function hideMenu()

　{

　 //드롭다운 메뉴 범위 내에 있으면 이동 시 숨겨지지 않습니다.

cY = event.clientY + document.body.scrollTop

if (cY>=y && cY= (x+5 ) && event.clientX <= x2 ||
{ window.event.cancelBubble = true; return;}

//숨기기

TempMenu.style.display = "없음"; 🎜> window.event.cancellBubble = true;

IsDroped =false;

　}

　

　　　　

　　

　

　/HTML> Javascript 디자인 웹 페이지의 드롭다운 메뉴 내용. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!