可以通过以下几个步骤来实现一个简单的菜单 :
1.将菜单(Menu)用一个表格行来表示,其中只有一个单元格,内容是菜单的名称 ,如:
<TR>
<TD id="td_0" align="middle" width="89%" bgColor=#1f65c2>
<A href="javascript:Show(0)">基础数据管理</A>
</TD>
</TR>
这个地方给表示菜单的单元格也定义了一个ID,这个ID的定义是非常重要的,在整个页面中都是可见的,这样就可以通过ID来
指定其所代表元素的属性。单元格的内容是一个超连接,他指定一个javascript方法,响应点击此菜单后的事件 .
2.将此菜单下的所有菜单项紧跟在菜单后放在一个表格行中的仅有的一个单元格中,使用换行来将他们竖起排列
<TR id=tr_0 style="DISPLAY: none;cursor:hand">
<TD align="middle" bgColor="#4c84ce" height="50">
<DIV align="center">
<A href="" >图书分类信息</A> <BR>
<A href="" >藏馆信息</A> <BR>
</DIV>
</TD>
</TR>
这个地方注意,为放置菜单项的这个表格行定义了一个ID,对菜单的展开与折叠将通过这个ID来控制,另外,菜单的初始状态是折叠的,即这一行不可见,所以使用了CSS代码 style="display:none"
3.第三步就是整个过程中的重点了,需要写一段js代码来处理菜单的点击事件
<script>
var classCount = 4; // 菜单大类的个数
function Show(theId) {//参数为菜单的编号,从0开始
theTr = eval("tr_" + theId); //生成相应元素的在页面中的ID
//通过此ID来设置相应元素的CSS属性
//如果是折叠的,则展开之
if (theTr.style.display == "none") {
theTr.style.display = "block";
}
//否则折叠之
else {
theTr.style.display = "none";
}
//遍历关闭之前展开的菜单(对当前菜单不做处理)
for (i = 0; i < classCount; i++) {
if (i == theId)
continue;
theTr = eval("tr_" + i);
theTr.style.display = "none";
}
}
</script>
分享到:
相关推荐
主要为大家详细介绍了JavaScript实现简单的树形菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
利用CSS和JavaScript分别实现简单的下拉框效果,简单实用,容易上手
JavaScript实现简单的轮播图效果 轮播图:在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。这些图片就都是轮播图,这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里面...
本文实例讲述了javascript简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE ...
javascript实现简易的tab选项卡切换效果
主要介绍了JavaScript实现非常简单实用的下拉菜单效果,通过定义显示及隐藏菜单项及鼠标事件调用该函数实现下拉菜单功能,需要的朋友可以参考下
本文实例为大家分享了js实现左侧菜单效果展示的具体代码,供大家参考,具体内容如下 当前所学做出来的代码量有点大,以后的学习会使它更简单 <!DOCTYPE html> <html lang="en"> <head> <meta ...
用javascript代码实现简单的qq菜单效果,仅供学习实用,带有注释。
1分钟Vue实现右键菜单 目录 效果图安装 代码实现 自定义样式 总结 效果图 安装 代码实现 自定义样式 总结 高效实现需求,避免重复造轮子。今天给大家分享的是,如何在最短的时候内实现右键菜单。方法...
主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下
鼠标滑上显示二级菜单滑出菜单消失和定时切换、点击切换、图标切换的轮播图效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1、使用select标签保存年月的所选菜单。使用...
本文实例讲述了JavaScript实现的经典文件树菜单效果。分享给大家供大家参考。具体如下: 这是一款简单的JavaScript文件树菜单,经典的树形菜单,特别是文件夹的样式比较经典,折叠和展开也很流畅自然,不过本款菜单...
开始自己就想做一个属于自己的下拉菜单,从什么都不知道到最后成功设计出来了!程序简单易懂,适合初学者!
主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下
本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码。 代码如下: <html> <head> <title>使用...