2006-10-18

下拉菜单的简单制作

来源: 本站收集整理 作者:佚名 评论 0 条
 

对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点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>
共2页: 上一页 1 [2] 下一页
(本文仅表明作者个人观点,不代表本站及其管理员立场.) 推荐 收藏 投稿 打印 返回 关闭
上一篇:DIV与Table布局在大型网站的可用性比较  
下一篇:怎样管理好样式
    评论加载中…

网站首页  -  网站地图 -   站长论坛  -  网站投稿  -    -  网站管理
Copyright © 2008 芜湖站长站 All Rights Reserved 皖ICP备07500611号