编程 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开发的数独游戏代码

Oct 29 Javascript

写了10年的Javascript也未必全了解的连续赋值运算

Mar 25 Javascript

鼠标滚轴控制文本框值的JS代码

Nov 19 Javascript

jQuery on方法传递参数示例

Dec 09 Javascript

使用JQuery实现Ctrl+Enter提交表单的方法

Oct 22 Javascript

JS组件Bootstrap Select2使用方法详解

Apr 17 Javascript

javascript实现计时器的简单方法

Feb 21 Javascript

微信小程序支付功能（前端）的实现

May 24 Javascript

three.js中3D视野的缩放实现代码

Nov 16 Javascript

vue-cli 打包使用history模式的后端配置实例

Sep 20 Javascript

vue从一个页面跳转到另一个页面并携带参数的解决方法

Aug 12 Javascript

ant design vue datepicker日期选择器中文化操作

Oct 28 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

CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录

2015/03/25 PHP

PHP CURL post数据报错 failed creating formpost data

2016/10/16 PHP

php脚本守护进程原理与实现方法详解

2017/07/20 PHP

PHP设计模式之简单工厂和工厂模式实例分析

2019/03/25 PHP

使用jquery与图片美化checkbox和radio控件的代码(打包下载)

2010/11/11 Javascript

javaScript实现浮点数转十六进制字符

2013/10/29 Javascript

JS实现跟随鼠标的链接文字提示框效果

2015/08/06 Javascript

javascript的 {} 语句块详解

2016/02/27 Javascript

ajax跨域调用webservice的实现代码

2016/05/09 Javascript

JS获取url参数、主域名的方法实例分析

2016/08/03 Javascript

在线引用最新jquery文件的实现方法

2016/08/26 Javascript

jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

2016/11/09 Javascript

详解angular如何调用HTML字符串的方法

2018/06/30 Javascript

angular6的table组件开发的实现示例

2018/12/26 Javascript

vue实现移动端轻量日期组件不依赖第三方库的方法

2019/04/28 Javascript

vue中el-input绑定键盘按键(按键修饰符)

2020/07/22 Javascript

Python模块学习 filecmp 文件比较

2012/08/27 Python

彻底理解Python list切片原理

2017/10/27 Python

Django权限机制实现代码详解

2018/02/05 Python

Django1.9 加载通过ImageField上传的图片方法

2018/05/25 Python

Python常见MongoDB数据库操作实例总结

2018/07/24 Python

Python连接Mssql基础教程之Python库pymssql

2018/09/16 Python

Python3爬虫学习之应对网站反爬虫机制的方法分析

2018/12/12 Python

解决pycharm 远程调试上传 helpers 卡住的问题

2019/06/27 Python

OpenCV 轮廓检测的实现方法

2019/07/03 Python

Django 过滤器汇总及自定义过滤器使用详解

2019/07/19 Python

python打包成so文件过程解析

2019/09/28 Python

Farnell德国：电子元器件供应商

2018/07/10 全球购物

康帕斯酒店预订：Compass Hospitality（支持中文）

2018/08/23 全球购物

联谊活动策划书

2014/01/26 职场文书

网络编辑岗位职责范本

2014/02/10 职场文书

党员弘扬焦裕禄精神思想汇报

2014/09/10 职场文书

校园安全广播稿范文

2014/09/25 职场文书

2014年涉外离婚协议书范本

2014/11/20 职场文书

珍爱生命主题班会

2015/08/13 职场文书

python 详解turtle画爱心代码

2022/02/15 Python