Home > Developer > JavaScript
Based on the features of the dropdown menu above, we can start to make a Drop-down menu in the Web page. We place an area at the top of the page to display the main menu bar, each of which is positioned horizontally as a hyperlink, unless, of course, the menu item does not have a submenu, the hyperlink here does not point to any address and uses it only to activate the submenu. The format of the area is shown in Program 1.
<div id= ' pad ' ......>
<a id= ' pad1 ' > menu item </A>
<a id= ' pad2 ' > menu item two </A>
......
</DIV>
Next, we define the corresponding submenu according to the number of main menu items. Define a range for each submenu, the first element in the range is a horizontal line, and each submenu is placed as a hyperlink in the area, and the submenu is vertically arranged, and each hyperlink is added <BR> wrapped. Of course the area is not yet displayed, but when it is activated, its display position should be on top of other objects, so its style attribute is set to style= ' Display:none; Z-index:9: '. Note the ID of each hyperlink should be the same as the ID of the main menu to facilitate uniform processing. Format See program 2.
<span id= ' idpad1 ' style= ' display:none; Z-index:9; ' >
Sub menu item 13 </A><BR>
......
</DIV>
</SPAN>
After the above steps, the Drop-down menu format has been defined, the following task is to control the display and hide these submenus.
When you move the mouse over the main menu bar, you should display its submenu, which we do by performing Domenu (MENUID) in response to the onmouseover event in the main menus. The parameter menuid of the procedure is the ID of the area representing the submenu, and the procedure executes with the window.event set first. Cancelbubble = True and calculates the position of the submenu display, including the upper-left and lower-right corner coordinates. Then execute the following statement to display the area of the submenu:
CurMenu.style.clip = "Rect (0 0 0 0)"; CurMenu.style.display = "block";
When the mouse is moved out of the main menu in two cases, one situation is that the mouse moved between the submenu and its main menu, it is not possible to hide the submenu, the other is that the mouse moved out of the submenu and its main menu area, you need to hide the submenu. We do this by executing the Hidemenu () response to the onmouseout of the main menu and executing the onmouseout event in the region of the Hidemenu () Response submenu.
The other two functions in the Web page mouseout () and mouseover () are simple enough to handle the color changes of the menu items when the mouse moves.
Complete source code See "Electronic and Computer" website www.pccomputing.com.cn.
The effect of web browsing is as shown in Figure 1, and the operating environment is IE4.0 above version.
(Figure Wangye) Figure 1
<HTML>
<HEAD>
<TITLE> drop-down menu in Web page </TITLE>
</HEAD>
<script language= "JavaScript" >
var isdroped =false;
function Mouseout ()
{
Window.event.srcElement.style.color = ' white ';//When the mouse is moved away
}
function MouseOver ()
{
Window.event.srcElement.style.color = ' red ';//mouse Enter with red//mouse Enter red
}
function Domenu (MENUID)
{
var curmenu = document.all (MENUID);
file://to avoid blinking, if the Drop-down menu is already displayed, do not redraw.
if (isdroped==true)
{
Window.event.cancelBubble = true;
return false;
}
Window.event.cancelBubble = true;
Tempmenu = Curmenu;
file:// The position of the Drop-down menu
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.clip = "Rect (0 0 0 0)";
CurMenu.style.display = "block";
file:// after 2 milliseconds to display the menu, to ensure that the toolbarmenu.offsetheight has a value, avoid moving down from the main menu Drop-down menu when the pull menu disappears.
Window.settimeout ("ShowMenu ()", 2);
return true;
}
function ShowMenu ()
{
y2 = y + tempmenu.offsetheight;
TempMenu.style.clip = "Rect (auto auto, Auto Auto)";
isdroped =true;//dropdown menu has been shown
}
function Hidemenu ()
{
file:// is not hidden if it is moved within the range of the Drop-down menu.
CY = Event.clienty + document.body.scrollTop;
if (cy>=y && cy<y2 && event.clientx >= (x+5) && event.clientx <= x2 | |
Cy>1 && cy<y && event.clientx >= (x+5) && event.clientx <= x2-10)
{window.event.cancelBubble = true; return;}
file:// Hidden
TempMenu.style.display = "None";
Window.event.cancelBubble = true;
Isdroped =false;
}
</SCRIPT>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<div id= ' menu ' style= ' position:absolute;background-color:white;width:100%;top:0;left:0; ' >
<div id= ' pad ' style= ' position:relative;height:20;width:100%;font:bold 11pt song body; Background-color: #007FFF; color: White; ' >
<a target= ' _top ' title= ' id= ' pad1 '
>
menu item A
</A>
<span style= "Color:white" > </SPAN>
<a target= ' _top ' title= ' id= ' pad2 '
>
menu item Two
</A>
</DIV>
</DIV>
<span id= ' idpad1 ' style= ' display:none;position:absolute;width:140;background-color: #007FFF;p adding-top:0; Padding-left:0;padding-bottom:20;z-index:9; '
Onmouseot= "mouseout ();" >
Sub menu item two or three </A><BR>
<a id= ' pad2 ' style= ' text-decoration:none;cursor:hand;font:bold 11pt Arial; Color:white '
>
Exit System </A>
</DIV>
</SPAN>
< other content of the!--page-->
</BODY>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
