div drop-down menu (i)

Menu | dropdown

script> var cm=null; Document.onclick = new Function (' Show (null) ') function GetPos (el,sprop) {var IPos = 0 while (el!=null) {ipos+=el["offset "+ Sprop] el = el.offsetparent} return IPos} function show (el,m) {if (m) {m.style.display= '"; m.style.pixelleft = Get Pos (EL, "left") M.style.pixeltop = GetPos (el, "top") + El.offsetheight} if ((M!=CM) && (cm)) cm.style.display= "Non" E "Cm=m}"
This is a very simple menu, although simple, but we can learn from this example some of the relevant knowledge of CSS and javascripts, for the realization of the Pull-down menu production Principle and foundation has great benefits. In this example, I used the div tag as my drop-down menu column, and I used a table to do the header. The principle is to switch the display properties of the Drop-down menu column by identifying the mouse movement.
The following is the effect of this div menu, you can click on any blank page to cancel the Drop-down menu display.

Magazine Technology Site portal site personal favorites Site

Tenkine yesky.com
Computer Business Intelligence
Trendy Electronics
　

Sina Web Sina
Sohu Sohu
NetEase NetEase
　

Mouse Network Programming Station
China alumni
China Software Development Network

Well, if I tell you that this effect is also dozens of lines of code, do you believe it? Anyway, let's take a step-by-step study of how this menu is made. Step-by-step,let "s go.
The first step, you ㄒ undercover said ハ swear cylinder said チ weapon? CSS Cascading style sheet, here, if you do not know what CSS means, please refer to the "Computer newspaper website" on the CSS tutorial. We define two CSS classes, one is Meun, the other is submenu, menu defines the style displayed on top of the menu, and submenu defines the display style for the Drop-down menu column. Here, it is important to note that the "position:absolute;width:200" CSS attribute in submenu, which is necessary, because it determines where we will display this submenu. The attributes of other CSS are not available. Here is a description of the two CSS classes that you can put below the $#@60;head$#@62;$#@60;/head$#@62of the web, or $#@60;body$#@62;$#@60;/body$ #@62between the two;

$#@60; Style$#@62;
$#@60;! --
. menu {background-color:green;width:120; height:20;color:white; Text-align:center;font-size:9pt;font-weight: Bolder}
. submenu {position:absolute;top:40;background-color:lightyellow;width:180; font-size:9pt}
--$#@62;
$#@60;/style$#@62;

In the second step, let's take a look at the code that hides and displays the JavaScript in the Drop-down menu column. This code is very simple, as long as the study of a little javascripts people should be very easy to read. If you do not know JavaScript, please also refer to the "Computer newspaper website" on the article on JavaScripts. The implication of this code is that whenever a mouse enters a menu item (a button), its Pull-down menu is displayed by a call show function. The main function of this show function is to display the current Drop-down menu column, hide the other menu column, and put the currently displayed item in the variable cm. In addition, here I have added a simple mouse click event (onclick) handle that hides all drop-down menu columns when the mouse clicks on the page. Below, I give the entire JavaScript program, which has a function called GetPos, which is used to get the display position of the Drop-down menu column.

$#@60; Script$#@62;
var cm=null;
Document.onclick = new Function ("Show (null)")
function GetPos (El,sprop)
{var IPos = 0
while (El!=null)
{ipos+=el["offset" + sprop]
el = el.offsetparent}
Return IPos}
Function Show (EL,M)
{if (m) {m.style.display= "";
M.style.pixelleft = GetPos (El, left)
M.style.pixeltop = GetPos (el, top) + el.offsetheight}
if ((m!=cm) && (cm)) cm.style.display= "None" cm=m}
$#@60;/script$#@62;