<script src="http://www.yesky.com/TLimages/head/y_newcontenthead_0608.js" type="text/javascript"></script>
阅读关于 下拉菜单 网页制作 网页陶吧 龙犊 的全部文章
<script language="JavaScript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
</script> <script language="JavaScript" src="http://comments.yesky.com/articlereplies/6/1202/2621202.js" charset="gb2312" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
</script>
<script language="JavaScript" type="text/javascript"> </script> <script language="JavaScript" src="http://www.yesky.com/TLimages/projs/specdealer/-1_specdealer.js" charset="gb2312" type="text/javascript"></script>
下拉菜单的简单制作
下拉菜单的简单制作——对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。
对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点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 οnmοuseοver="MM_showHideLayers(Layer2,,hide,Layer1,,show)" borderColorLight=#000000 width=100 bgColor=#ccccff height=15> <DIV align=center><A οnclick="MM_showHideLayers(Layer2,,hide,Layer1,,show)" href="2#">网上书店</A></DIV></TD> <TD οnmοuseοver="MM_showHideLayers(Layer2,,show,Layer1,,hide)" borderColorLight=#000000 width=100 bgColor=#ccccff height=15> <DIV align=center><A οnclick="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 οnmοuseοver="MM_showHideLayers (Layer1,,show)" οnmοuseοut="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 οnmοuseοver="MM_showHideLayers (Layer2,,show)" οnmοuseοut="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> |
到这里,你就可以看到一个完整的下拉菜单的网页特效了。
阅读关于 下拉菜单 网页制作 网页陶吧 龙犊 的全部文章
![](http://www.yesky.com/TLimages/newcontent/y_newcontent27.gif)
![](http://www.yesky.com/TLimages/newcontent/y_newcontent28.gif)
· | 知本家有奖活动进行中 | · | 超低话费只需0.12元/分! | · | 戴尔网站 大礼不断 |
· | 上网买戴尔,超值不超支! | · | 金山毒霸高速下载 终身免费 | · | '充300送300'继续升温... |
· | 免费下载最新版杀毒软件 | · | 上网买戴尔,得免费升级大礼 | · | Excel服务器学习下载 |
相关文章
最新更新
编辑新作
热点文章
- 如何合理命名WEB站点网站资源(2006-10-17 10:10)
- 域名的抢注 域名投资知识汇总(2006-10-17 10:17)
- 如何开始web标准之路(2006-10-17 10:21)
- 成长 从菜鸟到准网页设计师的历程(2006-10-17 15:32)
- 网页设计中JS与Java的区别(2006-10-17 15:35)
- rel=nofollow互联网为超链接戴上安全帽(2006-10-17 15:52)
- 链接中的JS 特效功能代码大放送(2006-10-17 16:13)
- ASP下载系统防盗链方法(2006-10-17 16:19)
- web 2.0网站命名的7个建议(2006-10-18 09:20)
- 新浪的首页复杂吗?百度的首页简单吗?(2006-10-18 09:48)
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent27.gif)
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent28.gif)
最新热图
<script language="JavaScript" src="http://pic.yesky.com/js/wenzhang.js" type="text/javascript"></script>
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent27.gif)
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent28.gif)
天极无线
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent27.gif)
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent28.gif)
<script language="JavaScript" type="text/javascript">
</script>
<script src="http://www.yesky.com/TLimages/qljs/contentjs.js" type="text/javascript"></script>
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent05.gif)
![](http://www.yesky.com/TLimages/newcontent/qltitle01.gif)
<script type="text/javascript"> function copyToClipBoard() { var clipBoardContent=document.title; clipBoardContent+='/r/n' + document.location.href; window.clipboardData.setData("Text",clipBoardContent); alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友!/r/n/r/n内容如下:/r/n" + clipBoardContent); } </script>
复制链接
相关关键字
![](http://homepage.yesky.com/TLimages/newcontent/y_newcontent11.gif)
src="http://media.yesky.com/adjs/iframe-column/imp7.htm" frameborder="0" width="0" scrolling="no" height="0">
![](http://media.yesky.com/button/impressions.gif)
![](http://media.yesky.com/button/impressions.gif)
<script language="JavaScript" type="text/javascript"> </script> <script language="JavaScript" src="http://www.yesky.com/TLimages/projs/specdealer/-1_specdealer.js" charset="gb2312" type="text/javascript"></script>
<script language="JavaScript" src="http://www.yesky.com/TLimages/include/newcontentjxs.js" type="text/javascript"></script>
<script language="JavaScript" src="/dayvisittop.js" type="text/javascript"></script> <script language="JavaScript" src="http://www.yesky.com/TLimages/qljs/todaytop.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.yesky.com/dayvisittop.js" type="text/javascript"></script> <script language="JavaScript" src="http://www.yesky.com/TLimages/qljs/todaytop.js" type="text/javascript"></script>
![](http://www.yesky.com/TLimages/newcontent/y_newcontent38.gif)
<script src="http://www.yesky.com/TLimages/include/yfloor1.js" type="text/javascript"></script>
<script language="JavaScript" src="http://www.yesky.com/TLimages/include/f.js" type=""></script>
<script src="http://media.yesky.com/adjs/column/yesky-richmedia.js" type="text/javascript"></script>
Copyright (C) 1999-2006 Chinabyte.com, All Rights Reserved 版权所有 天极网络
渝ICP证B2-20030003号
商务联系、网站内容、合作建议:010-82657868 详细联系方式 在线提交意见反馈 Powered by 天极内容管理平台CMS4i
商务联系、网站内容、合作建议:010-82657868 详细联系方式 在线提交意见反馈 Powered by 天极内容管理平台CMS4i
<script language="Javascript" type="text/javascript"> var now = new Date(); document.write("
"); </script>
<script type="text/javascript"> var ad_cid; if (window.location.search.substring(1) != "") { ad_cid = window.location.search.substring(1); } else { ad_cid = 4197; } </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad1").innerHTML=document.getElementById("span_ad1").innerHTML; document.getElementById("span_ad1").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad9").innerHTML=document.getElementById("span_ad9").innerHTML; document.getElementById("span_ad9").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad10").innerHTML=document.getElementById("span_ad10").innerHTML; document.getElementById("span_ad10").innerHTML=""; </script>
<script type="text/javascript"> if(document.getElementById("contentAdv")) { document.getElementById("contentAdv").innerHTML=document.getElementById("span_ad3").innerHTML; document.getElementById("span_ad3").innerHTML=""; } else { document.getElementById("ad3").innerHTML=document.getElementById("span_ad3").innerHTML; document.getElementById("span_ad3").innerHTML=""; }</script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad5").innerHTML=document.getElementById("span_ad5").innerHTML; document.getElementById("span_ad5").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad11").innerHTML=document.getElementById("span_ad11").innerHTML; document.getElementById("span_ad11").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad2").innerHTML=document.getElementById("span_ad2").innerHTML; document.getElementById("span_ad2").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad4").innerHTML=document.getElementById("span_ad4").innerHTML; document.getElementById("span_ad4").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad7").innerHTML=document.getElementById("span_ad7").innerHTML; document.getElementById("span_ad7").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad8").innerHTML=document.getElementById("span_ad8").innerHTML; document.getElementById("span_ad8").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> document.getElementById("ad6").innerHTML=document.getElementById("span_ad6").innerHTML; document.getElementById("span_ad6").innerHTML=""; </script>
<script language="JavaScript" type="text/javascript"> if (typeof(qltags)=='' || typeof(qltags)=='undefined') { document.write("