Web ページの Javascript デザインのドロップダウン メニュー

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

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

　　

 

　　菜单项一 

　　菜单项二 

　　…… 

　　

　　 

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

　　 

　　

---

 

　　

 

　　  

　　 子菜单项一一
 

　　  

　　 子菜单项一二
 

　　

---

 

　　  

　　 子菜单项一三
 

　　…… 

　　

上記の手順の後、次のタスクは、これらのサブメニューの表示と非表示を制御することです。

マウスがメイン メニュー バー上に移動すると、メイン メニューの onmouseover イベントに応答して doMenu(MenuID) を実行することで、そのサブメニューが表示されます。プロセスのパラメータMenuIDはサブメニューを表す領域のIDであり、プロセスが実行されると、最初にwindow.event.cancelBubble = trueが設定され、左上隅と下端を含むサブメニューの表示位置が計算されます。右隅の座標。次に、次のステートメントを実行して、サブメニューが配置されている領域を表示します。

CurMenu.style.clip = "rect(0 0 0 0) "; CurMenu.style.display = "block"; の 2 種類があります。マウスがメイン メニューの外に移動する場合 マウスがサブメニューとそのメイン メニューの間を移動する場合と、サブメニューを非表示にできない場合と、マウスがサブメニューの領域の外に移動する場合があります。この場合、サブメニューを非表示にする必要があります。これを完了するには、hideMenu() を実行してメイン メニューの onmouseout イベントに応答し、同時に HideMenu() を実行してサブメニューが配置されている領域の onmouseout イベントに応答します。

Webページ内の他の2つの関数mouseout()とmouseover()の関数は、マウスが動いたときのメニュー項目の色の変更を処理するために使用されます。

完全なソース コードについては、「電子機器とコンピュータ」の Web サイト www.pccomputing.com.cn を参照してください。

Webブラウジングの効果を図1に示します。動作環境はIE4.0以上です。

（イラストWANGYE）





DIV ID='menu' STYLE='position:absolute;background-color:white;width:100%;

;　　

 

　　
　　 onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');"> 

　　 菜单项一 

　　  

　　  

　　
　　 onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');"

　　 onclick="window.event.returnValue=false;"> 

　　 菜单项二