菜单详细制作教程一.docx

显示效果：

图1.1

第二步：

给添加边框效果：

代码如下：

#body_menuIndex

{

margin:

0;

padding:

0;

width:

100%;

height:

25px;

border:

solid1pxRed;

border-width:

5px1px1px;

}

显示效果：

图1.2

第三步：

让菜单横着显示：

添加代码如下：

#body_menu_ulli

{

float:

left;

position:

relative;

}

上面这个样式的意思是:

#body_menu_ul下面所有的li元素都是向左停靠，所以下面的所有的li菜单都是横着的。

效果如下：

图1.3

但很明显这不是我们要的横着的效果的，

第四步，隐藏二级菜单和三级菜单：

代码如下：

#body_menu_ulliul

{

display:

none;

position:

absolute;

}

上面的代码的意思是：

#body_menu_ul元素下所有的li元素下所有的ul元素都应用display:

none;position:

absolute;

样式。

display:

none;就是隐藏的意思，display:

block就是现实成块默认都是这样，

故而显示效果：

图1.4

注意：

让菜单横着，是让菜单项li元素全部向左悬浮li{float:

left}

让整个菜单ul元素隐藏则是用：

ul{display:

none;position:

absolute}

第五步：

添加鼠标经过是弹出菜单，移走是菜单消失，实现如下效果：

图1.5

首先添加脚本函数：

functiondisplaySubMenu（li）{

varsubMenu=li.getElementsByTagName（"ul"）[0];

subMenu.style.display="block";

}

functionhideSubMenu（li）{

varsubMenu=li.getElementsByTagName（"ul"）[0];

subMenu.style.display="none";

}

函数说明：

functiondisplaySubMenu（li）{

varsubMenu=li.getElementsByTagName（"ul"）[0];

subMenu.style.display="block";

}

首先这个函数有一个参数（javascript定义变量和参数可以直接写变量名，而不用指定变量类型，也可以不添加变量申明关键字var）从参数名字可以看出来传到这个函数的实参是个li元素，li.getElementsByTagName（"ul"）[0];这条语句的意思是：

实参li元素下获取元素名为“ul”的所以ul元素，而后面的那个[0]则是获取数组里的首个ul元素。

然后把获取的ul元素赋值给变量subMenu，设置改元素的样式为display:

block,，于是隐藏的菜单就显示了。

现在就开始给包含有菜单的菜单项添加函数。

注意如果菜单项（li元素）没有菜单（ul元素）是不能添加该函数。

除非修改函数判断是否包含有ul元素。

下面举个例子。

各类文章

上面是给一级菜单的第二个菜单项的onmouseover（鼠标经过事件）添加了事件处理函数，而onmouseout则是添加了鼠标移出事件处理函数。

具体添加代码，请查看下面全部源码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

#body_menuIndex

{

margin:

0;

padding:

0;

width:

100%;

height:

25px;

border:

solid1pxRed;

border-width:

5px1px1px;

}

#body_menu_ulli

{

float:

left;

position:

relative;

}

#body_menu_ulliul

{

display:

none;

position:

absolute;

}

functiondisplaySubMenu（li）{

varsubMenu=li.getElementsByTagName（"ul"）[0];

subMenu.style.display="block";

}

functionhideSubMenu（li）{

varsubMenu=li.getElementsByTagName（"ul"）[0];

subMenu.style.display="none";

}

站点首页

各类文章

JAVA文章

• J2SE文章
• J2ME文章

J2EE文章

• JSP文章
• SSH文章

• ASP.NET文章

相关搜索

当前位置：首页 > 自然科学 > 天文地理