javascript树形菜单效果

最新推荐文章于 2021-07-07 17:56:57 发布

xuenandong

最新推荐文章于 2021-07-07 17:56:57 发布

阅读量1k

点赞数

分类专栏： javascript 树形菜单文章标签： javascript border div

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

树形菜单

1 篇文章 0 订阅

订阅专栏

一、树形菜单效果

实现一个树形菜单的效果，代码中使用的图片自己准备

二、实现的思路

1、制作一级主菜单，例如：文学艺术
< A href="javascript:onClick=show('对应二级菜单的ID名') ">< IMG src="image/fclose.gif" border="0" align="absmiddle" >文学艺术< /A>
调用show()函数来实现二级菜单的显示及隐藏
2、用层制作二级菜单
< DIV id="层ID名称" style="display:none"
< IMG src="image/doc.gif" align="absmiddle">先锋写作
< IMG src="image/doc.gif" align="absmiddle">小说散文
< IMG src="image/doc.gif" align="absmiddle">诗风词韵
< IMG src="image/doc.gif" align="absmiddle">幻影奇侠
< IMG src="image/doc.gif" align="absmiddle">童话故事< /DIV>
说明：style="display:none"二级层菜单处于隐状态
3、制作效果：当点击“文学艺术”一级菜单时，“先锋写作、小说散文、诗风词韵、幻影奇侠”二级菜单显示，当再次点击“文学艺术”一级菜单时，下面的二级菜单处于隐藏状态，直接点击查看上面的菜单效果
4、依次制作各级一级、二级菜单

三、实现树形菜单的源代码：

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>树形菜单</TITLE>
<STYLE type="text/css">
DIV {
FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;
}
A{FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 13px; COLOR: #999999}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
if(document.getElementById(d1).style.display=='none'){
document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态，即显示
}
else{document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态，即隐藏
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV HEIGHT="30"><FONT color="#CC0000" ><B><IMG src="image/fold.gif" width="16" height="16" align="absmiddle">树形菜单：</B></FONT></DIV>
<A href="javascript:onClick=show('1') "><IMG src="image/fclose.gif" border="0" align="absmiddle" >文学艺术</A>
<DIV id="1" style="display:none"><IMG src="image/doc.gif" align="absmiddle">先锋写作<BR>
<IMG src="image/doc.gif" align="absmiddle">小说散文<BR>
<IMG src="image/doc.gif" align="absmiddle">诗风词韵</DIV>
<DIV><A href="javascript: onClick=show('2') "><IMG src="image/fclose.gif" border="0" align="absmiddle">贴图专区</A></DIV>
<DIV id="2" style="display:none"><IMG src="image/doc.gif" align="absmiddle">真我风采<BR>
<IMG src="image/doc.gif" align="absmiddle">视频贴图<BR>
<IMG src="image/doc.gif" align="absmiddle">行行摄摄<BR>
<IMG src="image/doc.gif" align="absmiddle">Flash贴图</DIV>
</BODY>
</HTML>

本文链接： http://www.snowdi.com/433.html → 转载请注明文章出自雪頔网

xuenandong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript树形菜单效果

一、树形菜单效果实现一个树形菜单的效果，代码中使用的图片自己准备二、实现的思路1、制作一级主菜单，例如：文学艺术文学艺术调用show()函数来实现二级菜单的显示及隐藏2、用层制作二级菜单style="display:none"先锋写作小说散文诗风词韵幻影奇侠童话故事说明：style="display:none"二级层菜单处于隐状态
复制链接

扫一扫