super_x

网页中的下拉菜单制作

　第１步：将下列代码复制到网页的标签之间：

<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. (GoldenFox@bigfoot.com)
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>

<!--
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>

　　将里面的字体大小换成了10.5磅的话，中文字就会简洁干净多了。

　　同样如果对菜单的表格感到不满意的话，可以修改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文件即可。只要修改的好就可以发挥成为多种风格了。
方法二:
<HTML>
<HEAD>
<TITLE>动感的伸缩菜单</TITLE>
<META. http-equiv=Content-Type content="text/html; charset=gb2312">
<script. language=JavaScript>
<!--
function JM_cc(ob){
var bj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}

function MM_findObj(n, d) { //v4.0
    var p,i,x;    if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</script>
<script. language=javascript. src="http://www.cnbruce.com/js/one.js"></script>
<script. language=javascript. src="http://www.cnbruce.com/js/two.js"></script>
<link href="http://www.cnbruce.com/js/welab.css" type=text/css rel=stylesheet>
</HEAD>
<BODY    bgcolor="#FFFFFF" leftmargin="0" topmargin="0" nload=init();>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="49">
      </td>
      <td width="74" valign="bottom" ><a id=menu1 href="#">MENU 1    </a></td>
      <td width="74" valign="bottom"><a id=menu2 href="#"> MENU 2    </a></td>
      <td width="74" valign="bottom"><a id=menu3 href="#"> MENU 3    </a></td>
      <td width="74" valign="bottom"><a id=menu4 href="#"> MENU 4    </a></td>
      <td width="74" valign="bottom"><a id=menu5 href="#"> MENU 5    </a></td>
      <td width="74" valign="bottom"><a id=menu6 href="#"> MENU 6    </a></td>
      <td width="74" valign="bottom"><a id=menu7 href="#"> MENU 7    </a></td>
    </tr>
    <tr bgcolor="#7285cf">
      <td colspan="8" height="20">　<font color="#FFFFFF">动感的伸缩菜单</font></td>
    </tr>
</table>
<script. language=javascript. src="http://www.cnbruce.com/js/dropdown_content.js"></script>
<br>
</BODY></HTML>
以上用的css加上javascript方法实现的同样我们可也以再dreamweaver中直接制作也可以用flash制作总之方法是很多的呵呵！

posted on 2008-10-28 21:40  super_x  阅读(2091)  评论(0)  编辑  收藏  举报