编程 Javascript

JS+CSS 制作的超级简单的下拉菜单附图

Posted in Javascript onNovember 22, 2013

先看效果：
JS+CSS 制作的超级简单的下拉菜单附图
代码：

<html> 
<head> 
<title>Good Test</title> 
<script> 
function showSubMenu(SubMenu) { 
document.getElementById(SubMenu).style.display = "inline"; 
} 
function HideSubMenu(SubMenu) { 
document.getElementById(SubMenu).style.display = "none"; 
} 
</script> 
<style> 
.menu{ 
margin:1px 1px 1px 1px; 
padding:3px 5px 3px 5px; 
background-color:#8080C0; 
color:white; 
} 
.submenu { 
margin:1px 1px 1px 1px; 
padding:3px 5px 3px 5px; 
background-color:#8080C0; 
color:white; 
} 
</style> 
</head> 
<body> 
<div> 
<table> 
<tr> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu1" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')" >Menu1</span> 
<br /> 
<div id="SubMenu1" style="display:none" onmousemove="showSubMenu('SubMenu1')" onmouseout="HideSubMenu('SubMenu1')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu2" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')">Menu2</span> 
<br /> 
<div id="SubMenu2" style="display:none" onmousemove="showSubMenu('SubMenu2')" onmouseout="HideSubMenu('SubMenu2')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu3" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')">Menu3</span> 
<br /> 
<div id="SubMenu3" style="display:none" onmousemove="showSubMenu('SubMenu3')" onmouseout="HideSubMenu('SubMenu3')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
<td style="vertical-align:top;"> 
<span class="menu" id="Menu4" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')">Menu4</span> 
<br /> 
<div id="SubMenu4" style="display:none" onmousemove="showSubMenu('SubMenu4')" onmouseout="HideSubMenu('SubMenu4')"> 
<span class="submenu">SubMenu1</span><br /> 
<span class="submenu">SubMenu2</span><br /> 
<span class="submenu">SubMenu3</span><br /> 
<span class="submenu">SubMenu4</span> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 参考教程

Dec 29 Javascript

js open() 与showModalDialog()方法使用介绍

Sep 10 Javascript

使用命令对象代替switch语句的写法示例

Feb 28 Javascript

javascript中使用正则表达式清理table样式的代码

Apr 01 Javascript

使用JavaScript解决网页图片拉伸问题(推荐)

Nov 25 Javascript

JS实现的简单拖拽功能示例

Mar 13 Javascript

Angular实现较为复杂的表格过滤，删除功能示例

Dec 23 Javascript

js实现京东秒杀倒计时功能

Jan 21 Javascript

vue实现滑动到底部加载更多效果

Oct 27 Javascript

layui.use模块外部使用其内部定义的js封装函数方法

Sep 16 Javascript

详解关闭令人抓狂的ESlint 语法检测配置方法

Oct 28 Javascript

Element DateTimePicker日期时间选择器的使用示例

Jul 27 Javascript

Mac/Windows下如何安装Node.js

Nov 22 #Javascript

javascript Event对象详解及使用示例

Nov 22 #Javascript

js Date概念详细介绍

Nov 22 #Javascript

页面定时刷新(1秒刷新一次)

Nov 22 #Javascript

js判断IE浏览器版本过低示例代码

Nov 22 #Javascript

js获取时间(本周、本季度、本月..)

Nov 22 #Javascript

文本框只能选择数据到文本框禁止手动输入

Nov 22 #Javascript

You might like

php通过文件头检测文件类型通用代码类（zip,rar等)

2010/10/19 PHP

PHP5中虚函数的实现方法分享

2011/04/20 PHP

php数组函数序列之array_unshift() 在数组开头插入一个或多个元素

2011/11/07 PHP

解析PHP工厂模式的好处

2013/06/18 PHP

PHP5.5和之前的版本empty函数的不同之处

2014/06/13 PHP

ci检测是ajax还是页面post提交数据的方法

2014/11/10 PHP

详解WordPress中给链接添加查询字符串的方法

2015/12/18 PHP

[原创]PHP获取数组表示的路径方法分析【数组转字符串】

2017/09/01 PHP

JQuery入门——事件切换之hover()方法应用介绍

2013/02/05 Javascript

使用JavaScript 实现对象匀速/变速运动的方法

2013/05/08 Javascript

JavaScript对数字的判断与处理实例分析

2015/02/02 Javascript

js全选实现和判断是否有复选框选中的方法

2015/02/17 Javascript

如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”

2015/03/05 Javascript

JS实现状态栏跑马灯文字效果代码

2015/10/24 Javascript

jQuery循环遍历子节点并获取值的方法

2016/04/14 Javascript

Three.js实现绘制字体模型示例代码

2017/09/26 Javascript

使用淘宝镜像cnpm安装Vue.js的图文教程

2018/05/17 Javascript

微信小程序新手教程之页面打开数量限制

2019/03/03 Javascript

在Python中使用列表生成式的教程

2015/04/27 Python

Python获取当前路径实现代码

2017/05/08 Python

每天迁移MySQL历史数据到历史库Python脚本

2018/04/13 Python

Python面向对象类继承和组合实例分析

2018/05/28 Python

python 随机森林算法及其优化详解

2019/07/11 Python

Django接收自定义http header过程详解

2019/08/23 Python

PyCharm汉化安装及永久激活详细教程(靠谱)

2020/01/16 Python

Pycharm及python安装详细步骤及PyCharm配置整理(推荐)

2020/07/31 Python

澳大利亚首屈一指的鞋类品牌：Tony Bianco

2018/03/13 全球购物

汉米尔顿手表官网：Hamilton

2020/09/13 全球购物

考试没考好检讨书

2014/01/31 职场文书

个人培训自我鉴定

2014/03/28 职场文书

地震捐款倡议书

2014/08/29 职场文书

授权委托书样本及填写说明

2014/09/19 职场文书

应收账款管理制度

2015/08/06 职场文书

领导干部学习三严三实心得体会

2016/01/05 职场文书

PyQt5 QThread倒计时功能的实现代码

2021/04/02 Python

详解Vue项目的打包方式(生成dist文件)

2022/01/18 Vue.js