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

用于自动添加Digg This!按钮的JavaScript

Dec 23 Javascript

如何让动态插入的javascript脚本代码跑起来。

Jan 09 Javascript

JavaScript EasyPager 分页函数

May 25 Javascript

基于jquery的代码显示区域自动拉长效果

Dec 07 Javascript

jquery查找tr td 示例模拟

May 08 Javascript

javascript实现漂亮的拖动层，窗口拖拽特效

Apr 24 Javascript

jQuery中animate的几种用法与注意事项

Dec 12 Javascript

JS 60秒后重新发送验证码的实例讲解

Jul 26 Javascript

详解wepy开发小程序踩过的坑(小结)

May 22 Javascript

JS异步处理的进化史深入讲解

Aug 25 Javascript

详解从vue-loader源码分析CSS Scoped的实现

Sep 23 Javascript

jquery实现点击左右按钮切换图片

Jan 27 jQuery

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隐形一句话后门，和ThinkPHP框架加密码程序(base64_decode)

2011/11/02 PHP

PHP实现显示照片exif信息的方法

2014/07/11 PHP

PHP 验证身份证是否合法的函数

2017/02/09 PHP

Laravel5中Cookie的使用详解

2017/05/03 PHP

Javascript 兼容firefox的一些问题

2009/05/21 Javascript

javascript getElementsByClassName 和js取地址栏参数

2010/01/02 Javascript

node.js中的require使用详解

2014/12/15 Javascript

简介JavaScript中search()方法的使用

2015/06/06 Javascript

《JavaScript高级编程》学习笔记之object和array引用类型

2015/11/01 Javascript

jQuery+Ajax实现无刷新操作

2016/01/04 Javascript

JS实现的简单轮播图运动效果示例

2016/12/22 Javascript

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

2018/01/17 Javascript

基于layui数据表格以及传数据的方式

2018/08/19 Javascript

vue实现微信分享链接添加动态参数的方法

2019/04/29 Javascript

通过jQuery学习js类型判断的技巧

2019/05/27 jQuery

js实现div色块拖动录制

2020/01/16 Javascript

js操作两个json数组合并、去重，以及删除某一项元素

2020/09/22 Javascript

node.js如何根据URL返回指定的图片详解

2020/10/21 Javascript

解决Django migrate No changes detected 不能创建表的问题

2018/05/27 Python

python3使用pandas获取股票数据的方法

2018/12/22 Python

在Django model中设置多个字段联合唯一约束的实例

2019/07/17 Python

Python3 requests文件下载期间显示文件信息和下载进度代码实例

2019/08/16 Python

Python any()函数的使用方法

2019/10/28 Python

Python性能分析工具Profile使用实例

2019/11/19 Python

Python制作一个仿QQ办公版的图形登录界面

2020/09/22 Python

用Python制作音乐海报

2021/01/26 Python

英国HYPE双肩包官网：英国本土时尚潮牌

2018/09/26 全球购物

Marc O’Polo俄罗斯官方在线商店：德国高端时尚品牌

2019/12/26 全球购物

俄罗斯运动、健康和美容产品在线商店：Lactomin.ru

2020/07/23 全球购物

《小儿垂钓》教学反思

2014/02/23 职场文书

产品质量承诺范本

2014/03/31 职场文书

小学趣味运动会加油稿

2014/09/25 职场文书

中学生旷课检讨书模板

2014/10/08 职场文书

学生检讨书如何写

2014/10/30 职场文书

商场营业员岗位职责

2015/04/14 职场文书

工作迟到检讨书范文

2015/05/06 职场文书