菜单详细制作教程一

菜单一说明文档效果图：如下：今天我们来学习制作菜单一，菜单一是一种比较典型的菜单，各大网站用的都是这种菜单样式。今天的教程我们一步步的来讲解。先通过效果实现。然后效果优化，添加特效一，效果实现第一步。新建html页面，并且添加菜单，代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==body_menuIndexulid=body_menu_ulliahref=#站点首页/a/liliahref=/xiaowu668/article/article.jsp各类文章/aulliahref='#'JAVA文章/aulliahref='#'J2SE文章/a/liliahref='#'J2ME文章/a/liliahref='#'J2EE文章/aulliahref='#'JSP文章/a/liliahref='#'SSH文章/a/li/ul/li/ul/liliahref='#'ASP.NET文章/a/liliahref='#'C++文章/a/liliahref='#'VB文章/a/liliahref='#'ASP文章/a/liliahref='#'PHP文章/a/liliahref='#'Delphi文章/a/liliahref='#'其他文章/a/li/ul/liliahref=#软件下载/aulliahref='#'应用软件/a/liliahref='#'系统软件/a/liliahref='#'图形图像/a/liliahref='#'多媒体类/a/liliahref='#'行业软件/a/liliahref='#'编程开发/a/liliahref='#'编程开发/a/liliahref='#'黑客软件/a/li/ul/liliahref=#动画频道/aulliahref='#'编程教程/a/liliahref='#'其他教程/a/li/ul/liliahref=#源码下载/aulliahref='#'ASP源码/a/liliahref='#'JSP源码/a/liliahref='#'PHP源码/a/liliahref='#'.NET源码/a/liliahref='#'其他源码/a/li/ul/liliahref=#模板下载/a/liliahref=#我的相册/a/li/ul/div/body/html显示效果：图1.1第二步：给divid=body_menuIndex添加边框效果：代码如下：#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首先添加脚本函数：/stylescriptlanguage=javascripttype=text/javascriptfunctiondisplaySubMenu(li){varsubMenu=li.getElementsByTagName(ul)[0];subMenu.style.display=block;}functionhideSubMenu(li){varsubMenu=li.getElementsByTagName(ul)[0];subMenu.style.display=none;}/script函数说明：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元素。下面举个例子。lionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref=/xiaowu668/article/article.jsp各类文章/a上面是给一级菜单的第二个菜单项的onmouseover（鼠标经过事件）添加了事件处理函数，而onmouseout则是添加了鼠标移出事件处理函数。具体添加代码，请查看下面全部源码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==text/css#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;}/stylescriptlanguage=javascripttype=text/javascriptfunctiondisplaySubMenu(li){varsubMenu=li.getElementsByTagName(ul)[0];subMenu.style.display=block;}functionhideSubMenu(li){varsubMenu=li.getElementsByTagName(ul)[0];subMenu.style.display=none;}/script/headbodydivid=body_menuIndexulid=body_menu_ulliahref=#站点首页/a/lilionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref=/xiaowu668/article/article.jsp各类文章/aullionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref='#'JAVA文章/aulliahref='#'J2SE文章/a/liliahref='#'J2ME文章/a/lilionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref='#'J2EE文章/aulliahref='#'JSP文章/a/liliahref='#'SSH文章/a/li/ul/li/ul/liliahref='#'ASP.NET文章/a/liliahref='#'C++文章/a/liliahref='#'VB文章/a/liliahref='#'ASP文章/a/liliahref='#'PHP文章/a/liliahref='#'Delphi文章/a/liliahref='#'其他文章/a/li/ul/lilionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref=#软件下载/aulliahref='#'应用软件/a/liliahref='#'系统软件/a/liliahref='#'图形图像/a/liliahref='#'多媒体类/a/liliahref='#'行业软件/a/liliahref='#'编程开发/a/liliahref='#'编程开发/a/liliahref='#'黑客软件/a/li/ul/lilionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref=#动画频道/aulliahref='#'编程教程/a/liliahref='#'其他教程/a/li/ul/lilionmouseover=displaySubMenu(this)onmouseout=hideSubMenu(this)ahref=#源码下载/aulliahref='#'ASP源码/a/liliahref='#'JSP源码/a/liliahref='#'PHP源码/a/liliahref='#'.NET