菜单详细制作教程一.docx

1、菜单详细制作教程一 菜单一说明文档效果图：如下： 今天我们来学习制作菜单一，菜单一是一种比较典型的菜单，各大网站用的都是这种菜单样式。今天的教程我们一步步的来讲解。先通过效果实现。然后效果优化，添加特效一，效果实现 第一步。新建html页面 ，并且添加菜单，代码如下： 站点首页 各类文章 JAVA文章 J2SE文章 J2ME文章 J2EE文章 JSP文章 SSH文章 ASP.NET文章 C+文章 VB文章 ASP文章 PHP文章 Delphi文章 其他文章 软件下载 应用软件 系统软件 图形图像 多媒体类 行业软件 编程开发 编程开发 黑客软件 动画频道 编程教程 其他教程 源码下载 ASP源

2、码 JSP源码 PHP源码 .NET源码 其他源码 模板下载 我的相册 显示效果： 图1.1第二步：给 添加边框效果：代码如下： #body_menuIndex margin:0; padding:0; width:100%; height:25px; border:solid 1px Red; border-width:5px 1px 1px;显示效果： 图1.2第三步：让菜单横着显示：添加代码如下： #body_menu_ul li float: left; position: relative; 上面这个样式的意思是: #body_menu_ul下面所有的li元素都是向左停靠，所以下面的

3、所有的li菜单都是横着的。效果如下： 图1.3但很明显这不是我们要的横着的效果的，第四步，隐藏二级菜单和三级菜单：代码如下： #body_menu_ul li ul display :none; position:absolute; 上面的代码的意思是： #body_menu_ul元素下所有的li元素下所有的ul元素都应用display :none;position:absolute; 样式。display :none;就是隐藏的意思，display :block就是现实成块默认都是这样，故而显示效果： 图1.4注意：让菜单横着，是让菜单项li元素全部向左悬浮lifloat:left让整个菜单

4、ul元素隐藏则是用：uldisplay:none;position:absolute第五步：添加鼠标经过是弹出菜单，移走是菜单消失，实现如下效果： 图1.5 首先添加脚本函数： function displaySubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = block; function hideSubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = none; 函数说明： fun

5、ction displaySubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = block; 首先这个函数有一个参数（javascript定义变量和参数可以直接写变量名，而不用指定变量类型，也可以不添加变量申明关键字var）从参数名字可以看出来传到这个函数的实参是个li元素， li.getElementsByTagName(ul)0;这条语句的意思是：实参li元素下获取元素名为“ ul”的所以ul元素，而后面的那个0则是获取数组里的首个ul元素。然后把获取的ul元素赋值给变量 subMen

6、u ，设置改元素的样式为display:block ,，于是隐藏的菜单就显示了。现在就开始给包含有菜单的菜单项添加函数。注意如果菜单项（li元素）没有菜单（ul元素）是不能添加该函数。除非修改函数判断是否包含有ul元素。下面举个例子。 各类文章上面是给一级菜单的第二个菜单项的onmouseover （鼠标经过事件）添加了事件处理函数，而onmouseout 则是添加了鼠标移出事件处理函数。具体添加代码，请查看下面全部源码： #body_menuIndex margin:0; padding:0; width:100%; height:25px; border:solid 1px Red; bo

7、rder-width:5px 1px 1px; #body_menu_ul li float: left; position: relative; #body_menu_ul li ul display :none; position:absolute; function displaySubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = block; function hideSubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = none; 站点首页 各类文章 JAVA文章 J2SE文章 J2ME文章 J2EE文章 JSP文章 SSH文章 ASP.NET文章 a href=