n.substring(p+1)].

 

下拉菜单的简单制作

作者: 出处:天极网 责任编辑: 龙犊 [ 2006-10-17 16:09 ]
下拉菜单的简单制作——对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。

 

对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点HTML的知识,就可以。即使什么也不懂,照葫芦画瓢也行,呵呵。

第一步,定义下拉菜单JS代码

以下是引用片段:
<SCRIPT language=JavaScript>
<!-- 
function MM_findObj(n, d) { //v4.01
  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 && d.getElementById) x=d.getElementById(n); return x;

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v==show)?visible:(v==hide)?hidden:v; }
    obj.visibility=v; }
}
//-->
</SCRIPT>
 

第二步,在适当的位置插入目录菜单

以下是引用片段:
<TABLE borderColor=#ffffff height=25 width=150 align=left bgColor=#cccccc border=1 >
 <TBODY> <TR>
    <TD 
    onmouseover="MM_showHideLayers(Layer2,,hide,Layer1,,show)" 
    borderColorLight=#000000 width=100 bgColor=#ccccff height=15>
      <DIV align=center><A 
      onclick="MM_showHideLayers(Layer2,,hide,Layer1,,show)" 
      href="2#">网上书店</A></DIV></TD> 
 <TD 
    onmouseover="MM_showHideLayers(Layer2,,show,Layer1,,hide)" 
    borderColorLight=#000000 width=100 bgColor=#ccccff height=15>
      <DIV align=center><A 
      onclick="MM_showHideLayers(Layer2,,show,Layer1,,hide)" 
      href="1#">书盘目录</A></DIV></TD>
</TR>
</TBODY>
</TABLE>
 

第三步,插入隐藏层的定义.

以下是引用片段:
<DIV id=Layer1 style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 12px; WIDTH: 88px; HEIGHT: 163px"  

<TABLE borderColor=#ffffff bgColor=#ccccff borderColorLight=#000000 border=1 onmouseover="MM_showHideLayers 
(Layer1,,show)" onmouseout="MM_showHideLayers(Layer1,,hide)">
  <TBODY>
  <TR>
    <TD height=15>
      <DIV align=center><A href="A#">最新图书</A></DIV></TD></TR>
  <TR>
    <TD height=15>
      <DIV align=center><A href="S#">热点图书</A></DIV></TD></TR>
  <TR>
    <TD height=15>
      <DIV align=center><A href="D#">隆重推出</A></DIV></TD></TR>
</TBODY></TABLE>
</DIV> 
<DIV id=Layer2 style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 85px; WIDTH: 120px; HEIGHT: 127px"  

<TABLE borderColor=#ffffff bgColor=#ccccFF borderColorLight=#000000 border=1 onmouseover="MM_showHideLayers 
(Layer2,,show)" onmouseout="MM_showHideLayers(Layer2,,hide)">
  <TBODY>
  <TR>
    <TD height=15>
      <DIV align=center><A 
      href="F#">总目录</A></DIV></TD></TR>
  <TR>
    <TD height=15>
      <DIV align=center><A 
      href="G#">图书目录</A></DIV></TD></TR>
</TBODY></TABLE>
</DIV>
 

到这里,你就可以看到一个完整的下拉菜单的网页特效了。


  阅读关于 下拉菜单 网页制作 网页陶吧 龙犊 的全部文章
发表评论:(Html:禁止,UBB:允许)      【查看关于 下拉菜单的简单制作所有评论】
笔名     【收藏到天极网摘
请您注意:遵守国家有关法律、法规,尊重网上道德,承担一切因您的行为而直接或间接引起的法律责任。    天极网拥有管理笔名和留言的一切权利。
相关文章
最新更新
编辑新作
热点文章
最新热图
天极无线
  •  
相关关键字




 
src="http://media.yesky.com/adjs/iframe-column/imp7.htm" frameborder="0" width="0" scrolling="no" height="0">
 

 


欢迎订阅天极网RSS聚合资讯: http://www.yesky.com/index.xml     
Copyright (C) 1999-2006 Chinabyte.com, All Rights Reserved 版权所有 天极网络 渝ICP证B2-20030003号
商务联系、网站内容、合作建议:010-82657868 详细联系方式 在线提交意见反馈 Powered by 天极内容管理平台CMS4i
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值