编程 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的固定表格头部的代码(IE6,7,8测试通过)

May 18 Javascript

如何使用jQuery Draggable和Droppable实现拖拽功能

Jul 05 Javascript

innerHTML中标签可以换行的方法汇总

Aug 14 Javascript

js控制div层的叠加简单方法

Oct 15 Javascript

jquery利用json实现页面之间传值的实例解析

Dec 12 Javascript

JS实现购物车特效

Feb 02 Javascript

JS常见算法详解

Feb 28 Javascript

jQuery获取随机颜色的实例代码

May 21 jQuery

JavaScript指定断点操作实例教程

Sep 18 Javascript

微信小程序之数据绑定原理解析

Aug 14 Javascript

扫微信小程序码实现网站登陆实现解析

Aug 20 Javascript

js cavans实现静态滚动弹幕

May 21 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

Uchome1.2 1.5 代码学习 common.php

2009/04/24 PHP

php递归实现无限分类的方法

2015/07/28 PHP

PHP文件操作实例总结

2016/09/27 PHP

yii框架无限极分类的实现方法

2017/04/08 PHP

PHP函数积累总结

2019/03/19 PHP

php实现的生成排列算法示例

2019/07/25 PHP

Laravel 验证码认证学习记录小结

2019/12/20 PHP

jsTree 基于JQuery的排序节点 Bug

2011/07/26 Javascript

jquery不会自动回收xmlHttpRequest对象导致了内存溢出

2012/06/18 Javascript

javascript面向对象包装类Class封装类库剖析

2013/01/24 Javascript

js使用ajax读博客rss示例

2014/05/06 Javascript

深入理解javascript构造函数和原型对象

2014/09/23 Javascript

解决vue中监听input只能输入数字及英文或者其他情况的问题

2018/08/30 Javascript

如何实现iframe父子传参通信

2020/02/05 Javascript

Vue将props值实时传递并可修改的操作

2020/08/09 Javascript

[00:32]10月24、25日辉夜杯外卡赛附加赛开赛！

2015/10/23 DOTA

Python 的类、继承和多态详解

2017/07/16 Python

python组合无重复三位数的实例

2018/11/13 Python

Python3基础教程之递归函数简单示例

2019/06/07 Python

python matplotlib库直方图绘制详解

2019/08/10 Python

基于python进行抽样分布描述及实践详解

2019/09/02 Python

Django models文件模型变更错误解决

2020/05/11 Python

python 无损批量压缩图片（支持保留图片信息）的示例

2020/09/22 Python

大韩航空官方网站：Korean Air

2017/10/25 全球购物

Myprotein亚太地区：欧洲第一在线运动营养品牌

2020/12/20 全球购物

如何将字串String转换成整数int

2015/02/21 面试题

AJax面试题

2014/11/25 面试题

物流仓储计划书

2014/01/10 职场文书

有关九一八事变的演讲稿

2014/09/14 职场文书

小学教育见习报告

2014/10/31 职场文书

2014幼儿园大班工作总结

2014/11/10 职场文书

毕业生捐书活动倡议书

2015/04/27 职场文书

新店开张宣传语

2015/07/13 职场文书

总经理2015中秋节致辞

2015/07/29 职场文书

js实现自动锁屏功能

2021/06/02 Javascript

Linux系统下安装PHP7.3版本

2021/06/26 PHP