Javascript web design in the drop-down menu

Posted by john
4/4/2007
Related Tags:
css menu  web standards  CSS style design  css drop-down menu  css javascript 

  In creating web pages, in order to better organize information so that the classified information clearly shows that the level of clarity, creating web pages are often hard to attain.    Methods commonly used to Display information useful tree structure, with a page layout forms with Framework (frame) organizations pages, and so on.    But accustomed to the Windows operating system users, the use of menu operation can be considered as the most natural way.    Below we will look at how to design web pages in the drop-down menu.    The drop-down menu from a number of the top of the window shown in the main menu and all of the menu composed of the following sub-menu.    Each sub-menu often includes several sub-menu item.    Usually, only the menu in the window of the show, and when the mouse pointer at the point of the menu, the menu of the only sub-menu displayed.    When the mouse pointer from the menu, the sub-menu is hidden, the main menu to display only of the state. 

  According to the characteristics of the drop-down menu, we can start production of the web site, a drop-down menu.    We placed at the top of page one region, used to display the main menu, the main menu of each one as a hyperlink placed horizontally in the region, of course, unless the menu item no submenus, under normal circumstances here do not point hyperlinks any address, just use it to activate the sub-menu.    See the format of the regional procedures 1. 

  <DIV ID='pad' ……> 

  <A id = 'pad1' onmouseout = "mouseout (); hideMenu ();" onmouseover = "mouseover (); 

  DoMenu ( 'idpad1'); "onclick =" window.event.returnValue = false; "> menu item 1 </ A> 

  <A ID = 'pad2' onmouseout = "mouseout (); hideMenu ();" onmouseover = "mouseover (); 

  DoMenu ( 'idpad2'); "onclick =" window.event.returnValue = false; "> menu item 2 </ A> 

……

  </ DIV> 

  Then, according to the main menu, the corresponding definition of the number of sub-menu for each sub-menu to define a region, the region is the first Element in a horizontal line, and then each sub-menu, as a hyperlink place in the region, because of Menu vertical array, and after each hyperlink <BR> newline.    Of course, this region is not shown, but when it is activated, its location should be displayed in the other objects on, so its style attributes for home STYLE = 'display: none; z-index: 9;'.    Pay attention to each hyperlinks ID should be the main menu with the same ID to the unified handling.    Format see procedures 2. 

  <SPAN ID='idpad1' STYLE='display:none; z-index:9;' onmouseout='hideMenu();'> 

  <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1> 

  <DIV> 

  <A ID='pad1' HREF='11.htm' onmouseout="mouseout();" onmouseover="mouseover()"> 

  Submenu of January 1 </ A> <BR> 

  <A ID='pad1' HREF='12.htm' onmouseout="mouseout();" onmouseover="mouseover()"> 

  Submenu of January 2 </ A> <BR> 

  <HR STYLE='color:white' SIZE=1> <! - If it is necessary for underlining menu pairs division -> 

  <A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()"> 

  Submenu of January 3 </ A> <BR> 

……

  </ DIV> 

  </ SPAN> 

  After the above steps, the drop-down menu format has been well defined, the following task is to control these sub-menu display and hide. 

  When the mouse to move to the main menu bar, should show its submenus, through the implementation of our doMenu (MenuID) response to the main menu onmouseover events to complete.    MenuID the parameters of the process on behalf of the regional sub-menu ID of the process of implementation to set window.event. CancelBubble = true, and for sub-menu to appear, including the coordinates of the upper left corner and the Bottom right corner.    Then the following statement to display sub-menu in the region: 

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

  When the mouse out of the main menu, there are two, the mouse is a situation in the sub-menu and the main menu between Mobile, then could not hide sub-menu; another mouse is removed from the sub-menu and the main menu regional, then need to hide sub-menu.    We through the implementation of hideMenu () onmouseout response to the main menu, and the implementation of hideMenu () response in the region of the sub-menu onmouseout event to complete. 

  Website the other two function mouseout () and mouseover () function is very simple, namely to deal with the mouse movements of the Color of the menu changes. 

  Web browser operating environment for IE4.0 above. 

<HTML>

<HEAD>

  <TITLE> Page in the drop-down menu </ TITLE> 

  </ HEAD> 

  <SCRIPT LANGUAGE="JavaScript"> 

  Var IsDroped = false; 

  Function mouseout () 

  ( 

  Window.event.srcElement.style.color = 'white'; / / mouse away when the home is white 

  ) 

  Function mouseover () 

  ( 

  Window.event.srcElement.style.color = 'red'; / / mouse to enter the home when the red / / mouse into the red at home 

  ) 

  Function doMenu (MenuID) 

  ( 

  Var CurMenu = document.all (MenuID); 

  / / To avoid flicker, if the drop-down menu has been shown not re-painted. 

  If (IsDroped == true) 

  ( 

  Window.event.cancelBubble = true; 

  Return false; 

  ) 

  Window.event.cancelBubble = true; 

  TempMenu = CurMenu; 

  / / Calculate the location 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"; 

  / / 2 millisecond delay after the display menu, guaranteed ToolbarMenu.offsetHeight a value shift to avoid the drop-down menu from the main menu, the drop-down menu disappear. 

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

  Return true; 

  ) 

  Function showMenu () 

  ( 

  Y2 = y TempMenu.offsetHeight; 

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

  IsDroped = true; / / has shown that the drop-down menu 

  ) 

  Function hideMenu () 

  ( 

  / / If the drop-down menu within the scope of the movement is not hidden. 

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

  / / Hide 

  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宋体; background-color:#007FFF;color:white;'> 

  <A TARGET = '_top' TITLE =''ID = 'pad1' 

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

  A menu item 

  </ A> 

  <SPAN Style="color:white"> </ SPAN> 

  <A TARGET = '_top' TITLE =''ID = 'pad2' 

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

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

  The menu items 

  </ A> 

  </ DIV> 

  </ DIV> 

  <SPAN ID = 'idpad1' STYLE = 'display: none; position: absolute; width: 140; background-color: # 007FFF; padding-top: 0; padding-left: 0; padding-bottom: 20; z-index : 9; ' 

  Onmouseout = 'hideMenu ();'> 

  <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1> 

  <DIV STYLE='position:relative;left:0;top:8;'> 

  <A ID = 'pad1' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  HREF ='11. Htm 'TARGET =' _top ' 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Submenu of January 1 

  </ A> <BR> 

  <A ID = 'pad1' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  HREF ='12. Htm 'TARGET =' _top ' 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Submenu of January 2 

  </ A> <BR> 

  <A ID = 'pad1' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  HREF ='13. Htm 'TARGET =' _top ' 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Submenu of January 3 

  </ A> 

  </ DIV> 

  </ SPAN> 

  <SPAN ID = 'idpad2' STYLE = 'display: none; position: absolute; width: 140; background-color: # 007FFF; padding-top: 0; padding-left: 0; padding-bottom: 20; z-index : 9; 'onmouseout =' hideMenu ();'> 

  <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1> 

  <DIV STYLE='position:relative;left:0;top:8;'> 

  <A ID = 'pad2' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  HREF = 21st. Htm 'TARGET =' _top ' 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Submenu of February 1 </ A> <BR> 

  <A ID = 'pad2' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  HREF ='22. Htm 'TARGET =' _top ' 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Submenu of February 2 </ A> <BR> 

  <A ID = 'pad2' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  HREF = 23 Desember. Htm 'TARGET =' _top ' 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Submenu of February 3 </ A> <BR> 

  <HR STYLE='color:white' SIZE=1> <! - Separate firms -> 

  <A ID = 'pad2' STYLE = 'text-decoration: none; cursor: hand; font: bold 11pt 10 lines; color: white' 

  Onclick = "parent.close ()" 

  Onmouseout = "mouseout ();" onmouseover = "mouseover ()"> 

  Out </ A> 

  </ DIV> 

  </ SPAN> 

  <! - Pages of other content -> 

  </ BODY> 

  </ HTML> 

Related articles:

How to make your site is effectively included Baidu
  To each page with the heading and text related.    If Home, the proposed use of the site title or name of the site on behalf of the company / organization name of the rest of the content pages, the title of the contents of the proposed text made refining and summarized.   ...
Entry-level skills: FLASH programming experience
  In fact, I am kind of not how this was to produce programming experience (mainly their own a little bit of summing up experience), mainly to assist interested Wangshenchu study AS friends, limited personal level, which There are fallacies, we welcome the discussion correct.    Firs...
Ajax.net in the interaction with the server controls use
  Two days ago in the online components of a ajax to experience what I feel is pretty good.    But then how can it begin to control interaction with the server is, for example, I have a list of output, with only a one js html output?    No!    !    Now, I...
Visual recognition skills approach
  L.    With inverted.    Inverted of physical activity is beneficial.    Interestingly, in recent years advertising design priorities is also a time.    Will screen interested people or things the other way around.    After such an inversion, i...
Flash production flexibility with a simple mouse
  Today, the "merciless water," "Let the wind accompanied the" two brothers who each made a mouse with flexible moves now I do those issued for Members to be a reference.    This evolution of hope that we can do more work to provide better to be learned by everyon...