[求助]导航栏下拉式菜单的问题

[zyaksha]

http://www.seagate.com/cda/frontdoor
这个网站的导航栏的下拉菜单是怎么做出来的，请大侠们传授，感激不尽。

[wanghr100]

快速制作微软风格下拉菜单

说起网页上的下拉菜单，最最经典的就是微软风格的下拉菜单。凡是去过www.microsoft.com网站的看官都对这个简洁明快的下拉菜单垂涎不已。然而无奈的是复杂的代码让人望而生畏，记得论坛上经常有人询问这种菜单怎么做。现在我们就来介绍这个菜单如何制作。我们使用smartmenu。它可以制作一个始终浮动在屏幕顶端的下拉菜单。


　　源代码名称：Smart Menu (跨浏览器版)
　　作者：Constantin Kuznetsov Jr.
　　类型：外部js文件
　　效果：http://www.5dmedia.com/rudolf/web/web-navi1-0.htm
　　制作方法：菜单源文件下载

　　第一步：将下列代码复制到网页的＜HEAD＞＜/ HEAD＞标签之间。
　　＜style＞
　　＜!--
　　all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
　　.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
　　A:hover {color: red;}
　　--＞
　　＜/style＞

　　第二步： 将下面的代码复制到＜body＞标签的右边，位置紧挨着＜body＞标签 ：
　　＜script language="JavaScript" src="menu.js"＞
　　/*
　　Static Top Menu Script
　　By Constantin Kuznetsov Jr. ([e-mail])
　　Featured on Dynamicdrive.com
　　For full source code and installation instructions to this script, visit Dynamicdrive.com
　　*/
　　＜/script＞
　　＜script language="JavaScript" src="menucontext.js"＞＜/script＞
　　＜script language="JavaScript"＞
　　showToolbar();
　　＜/script＞
　　＜script language="JavaScript"＞
　　function UpdateIt(){
　　if (document.all){
　　document.all["MainTable"].style.top = document.body.scrollTop;
　　setTimeout("UpdateIt()", 200);
　　}
　　}
　　UpdateIt();
　　＜/script＞

　　第三步：添加菜单的内容。编辑menucontext.js文件，所有的菜单选项都在这里设置。默认的menucontext.js里面的内容，比较复杂我现在把代码精简出来。给大家做一个说明。整个代码如下：
　　function showToolbar()
　　{
　　// AddItem(id, text, hint, location, alternativeLocation);
　　// AddSubItem(idParent, text, hint, location);
　　//主菜单定义
　　menu = new Menu();
　　menu.addItem("multimedia", "多媒体", "多媒体软件", null, null);
　　menu.addItem("image", "图像处理", "图像处理软件", null, null);

　　//多媒体子菜单定义
　　menu.addSubItem("multimedia", "Macromedia公司", "Macromedia公司", "http://www.macromedia.com");
　　menu.addSubItem("multimedia", "5D多媒体", "5D多媒体", "http://www.5dmedia.com");

　　//图像处理子菜单定义
　　menu.addSubItem("image", "Adobe公司", "Adobe公司", "http://www.adobe.com");
　　menu.addSubItem("image", "Corel公司", "Corel公司", "http://www.corel.com");
　　menu.addSubItem("image", "Metacreation公司", "Metacreation公司", "http://www.metacreations.com");

　　//结束菜单定义
　　menu.showMenu();
　　}

　　上面的例子中制作的是一个有两个主菜单的菜单。一个主菜单为多媒体，一个主菜单为图像处理。主要靠两个命令来制作Additem为添加主菜单项目。格式为AddItem(菜单标记, 文本说明, 文本提示, 位置,替换位置)。AddSubItem为添加子菜单项目，idparent为主菜单的菜单标记，其余同前。

到这里还不算完。我们现在要继续完成菜单文件的上传和修改。


　　第四步：上传菜单文件。
　　将 menu.js和menucontext.js文件上传到和网页文件同一目录下。这样就完成了所有的操作。

　　菜单安装的一些善后工作：
　　安装了菜单之后如果需要将菜单完全和网页顶部和左边紧密结合。需要把＜body＞标签修改成为＜body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0"＞。
　　或许大家也许会对菜单的文字感到不满意。可以把制作菜单第一步的CSS代码进行修改。比如＜style＞，将里面的字体大小换成了10.5磅这样的话中文字就简洁干净多了。
　　＜!--
　　all.clsMenuItemNS{font-size: 10.5pt; color: white; text-decoration: none;}
　　.clsMenuItemIE{text-decoration: none; font-size: 10.5pt; color: white; cursor: hand;}
　　A:hover {color: red;}
　　--＞
　　＜/style＞

　　同样如果对菜单的表格觉得不满意的话，可以修改menu.js文件中的代码例如：
　　function Menu()
　　{
　　this.bgColor = "#008080";
　　if (ie) this.menuFont = "bold xx-small Verdana";
　　if (n) this.menuFont = "bold x-small Verdana";
　　// this.fontColor = "white";
　　this.addItem = addItem;
　　this.addSubItem = addSubItem;
　　this.showMenu = showMenu;
　　this.mainPaneBorder = 0;
　　this.subMenuPaneBorder = 0;
　　｝

　　this.bgcolor修改的是菜单属性。
　　this.mainPaneBorder修改的是主菜单的边框宽度
　　this.subMenuPaneBorder 修改的是子菜单的边框宽度。
　　修改完毕文件之后重新上传js文件即可。只要修改的好就可以把它发挥成为多种风格。


http://www.zdnet.com.cn/helplearning/follow-me/story/0,2008007951,20024819-1,00.htm

[wanghr100]

下拉菜单全攻略 用Dreamweaver4.0实现的

http://www.blueidea.com/doc/webpage/dreamweaver/200112/00000262.htm

[wanghr100]

http://www.goeway.com/web/webproduce/dreamweaver/monograph/menu/menu_01.asp