Drop-down menu in JavaScript design Web page

Source: Internet
Author: User
Tags format define range return window
Javascript| Menu | design | Web page | When the page is made, in order to better organize the information, so that the display of information classification clear, Level clear, web page makers often do their best. Commonly used methods are useful for displaying information in tree structure, using tables for Web page layout, and organizing pages with frames (frame) and so on. But for users who are accustomed to the Windows operating system, using menu manipulation can be considered the most natural way.   Let's take a look at how to design a pull-down menu in a Web page. The Drop-down menu consists of several main menu items displayed at the top of the window and a submenu below each menu bar. Each submenu often also contains several submenu items. Typically, only the menu bar appears in the window, and when the mouse pointer is over the menu bar, the submenu of the menu bar appears. When the mouse pointer leaves the menu, the submenu is hidden, returning to the state where only the main menu bar is displayed.

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>



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>




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



<TITLE> drop-down menu in Web page </TITLE>


<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;



<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


<span style= "Color:white" > </SPAN>

<a target= ' _top ' title= ' id= ' pad2 '



menu item Two




<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>



< other content of the!--page-->



Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.