电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
下拉菜单的简单制作
下拉菜单的简单制作
2006-10-20 17:23:17  文/佚名   出处:电脑软硬件应用网   

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

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

以下是引用片段:

<SCRIPTlanguage=JavaScript>

<!--

functionMM_findObj(n,d){//v4.01

varp,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);returnx;

}

functionMM_showHideLayers(){//v6.0

vari,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>

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

以下是引用片段:

<TABLEborderColor=#ffffffheight=25width=150align=leftbgColor=#ccccccborder=1>

<TBODY><TR>

<TD

onmouseover="MM_showHideLayers(Layer2,,hide,Layer1,,show)"

borderColorLight=#000000width=100bgColor=#ccccffheight=15>

<DIValign=center><A

onclick="MM_showHideLayers(Layer2,,hide,Layer1,,show)"

href="2#">网上书店</A></DIV></TD>

<TD

onmouseover="MM_showHideLayers(Layer2,,show,Layer1,,hide)"

borderColorLight=#000000width=100bgColor=#ccccffheight=15>

<DIValign=center><A

onclick="MM_showHideLayers(Layer2,,show,Layer1,,hide)"

href="1#">书盘目录</A></DIV></TD>

</TR>

</TBODY>

</TABLE>

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

以下是引用片段:

<DIVid=Layer1style="Z-INDEX:1;VISIBILITY:hidden;POSITION:absolute;TOP:42px;LEFT:12px;WIDTH:88px;HEIGHT:163px" >

<TABLEborderColor=#ffffffbgColor=#ccccffborderColorLight=#000000border=1onmouseover="MM_showHideLayers

(Layer1,,show)"onmouseout="MM_showHideLayers(Layer1,,hide)">

<TBODY>

<TR>

<TDheight=15>

<DIValign=center><Ahref="A#">最新图书</A></DIV></TD></TR>

<TR>

<TDheight=15>

<DIValign=center><Ahref="S#">热点图书</A></DIV></TD></TR>

<TR>

<TDheight=15>

<DIValign=center><Ahref="D#">隆重推出</A></DIV></TD></TR>

</TBODY></TABLE>

</DIV>

<DIVid=Layer2style="Z-INDEX:1;VISIBILITY:hidden;POSITION:absolute;TOP:42px;LEFT:85px;WIDTH:120px;HEIGHT:127px"

<TABLEborderColor=#ffffffbgColor=#ccccFFborderColorLight=#000000border=1onmouseover="MM_showHideLayers

(Layer2,,show)"onmouseout="MM_showHideLayers(Layer2,,hide)">

<TBODY>

<TR>

<TDheight=15>

<DIValign=center><A

href="F#">总目录</A></DIV></TD></TR>

<TR>

<TDheight=15>

<DIValign=center><A

href="G#">图书目录</A></DIV></TD></TR>

</TBODY></TABLE>

</DIV>

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

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号