编程 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 相关文章推荐

基于jQuery架构javascript基础体系

Jan 01 Javascript

JavaScript调用客户端Java程序的方法

Jul 27 Javascript

JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性

Dec 26 Javascript

javascript正则表达式总结

Feb 29 Javascript

如何判断Javascript对象是否存在的简单实例

May 18 Javascript

javascript之IE版本检测超简单方法

Aug 20 Javascript

关于Vue.js一些问题和思考学习笔记（1）

Dec 02 Javascript

jQuery实用密码强度检测

Mar 02 Javascript

vue-cli 引入、配置axios的方法

May 08 Javascript

基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

Apr 04 Javascript

layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

Sep 11 Javascript

JS函数参数的传递与同名参数实例分析

Mar 16 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

攻克CakePHP系列二表单数据显示

2008/10/22 PHP

PHP 编写的 25个游戏脚本

2009/05/11 PHP

PHP SEO优化之URL优化方法

2011/04/21 PHP

PHP函数eval()介绍和使用示例

2014/08/20 PHP

php倒计时出现-0情况的解决方法

2016/07/28 PHP

PHP第三方登录―QQ登录实现方法

2017/02/06 PHP

页面js遇到乱码问题的解决方法是和无法转码的情况

2014/04/30 Javascript

jQuery判断复选框是否勾选的原理及示例

2014/05/21 Javascript

JavaScript检测并限制复选框选中个数的方法

2015/08/12 Javascript

jquery判断密码强度的验证代码

2020/04/22 Javascript

jQuery基于BootStrap样式实现无限极地区联动

2016/08/26 Javascript

AngularJS实现一次监听多个值发生的变化

2016/08/31 Javascript

js 性能优化之快速响应的用户界面

2017/02/15 Javascript

jquery实现图片平滑滚动详解

2017/03/22 jQuery

ES6中Symbol类型用法实例详解

2017/04/06 Javascript

微信小程序图片宽度自适应的实现

2017/04/06 Javascript

微信小程序左滑删除实现代码实例

2019/09/16 Javascript

微信小程序实现点击页面出现文字

2020/09/21 Javascript

Javascript数组及类数组相关原理详解

2020/10/29 Javascript

在vue中嵌入外部网站的实现

2020/11/13 Javascript

[05:28]刀塔密之一：团结则存

2014/07/03 DOTA

[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭

2014/07/09 DOTA

python分布式环境下的限流器的示例

2017/10/26 Python

Python实现快速傅里叶变换的方法（FFT）

2018/07/21 Python

详解Django3中直接添加Websockets方式

2020/02/12 Python

使用python检查yaml配置文件是否符合要求

2020/04/09 Python

jupyter notebook运行命令显示[*](解决办法)

2020/05/18 Python

基于Python中Remove函数的用法讨论

2020/12/11 Python

三星俄罗斯授权在线商店：Samsung俄罗斯

2019/09/28 全球购物

湖南卫视在线视频媒体平台：芒果TV

2019/10/30 全球购物

德国户外商店：eXXpozed

2020/07/25 全球购物

大学生村官工作感言

2014/01/10 职场文书

“四风”问题自我剖析材料思想汇报

2014/09/23 职场文书

党员个人总结自评

2015/02/14 职场文书

MySql新手入门的基本操作汇总

2021/05/13 MySQL

Redis读写分离搭建的完整步骤

2021/09/14 Redis