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

如何判断鼠标是否在DIV的区域内

Nov 13 Javascript

详解JavaScript中数组的相关知识

Jul 29 Javascript

jQuery+HTML5加入购物车代码分享

Oct 29 Javascript

CSS3 3D 技术手把手教你玩转

Sep 02 Javascript

chrome浏览器如何断点调试异步加载的JS

Sep 05 Javascript

在JSP中如何实现MD5加密的方法

Nov 02 Javascript

AngularJS中watch监听用法分析

Nov 04 Javascript

JavaScript 保护变量不被随意修改的实现代码

Sep 27 Javascript

angular 实现下拉列表组件的示例代码

Mar 09 Javascript

基于vue实现圆形菜单栏组件

Jul 05 Javascript

小程序websocket心跳库(websocket-heartbeat-miniprogram)

Feb 23 Javascript

vue v-on:click传递动态参数的步骤

Sep 11 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原生模板引擎最简单的模板引擎

2012/04/25 PHP

Zend Framework中的简单工厂模式图文

2012/07/10 PHP

PHP实现电商订单自动确认收货redis队列

2017/05/17 PHP

JQuery.ajax传递中文参数的解决方法推荐

2011/03/28 Javascript

js URL参数的拼接方法比较

2012/02/15 Javascript

jquery快捷动态绑定键盘事件的操作函数代码

2013/10/17 Javascript

JavaScript数组去重的3种方法和代码实例

2015/07/01 Javascript

快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

2015/12/01 Javascript

学习JavaScript设计模式之责任链模式

2016/01/18 Javascript

Mongoose学习全面理解(推荐)

2017/01/21 Javascript

Javascript Event（事件）的传播与冒泡

2017/01/23 Javascript

微信小程序向左滑动删除功能的实现

2017/03/10 Javascript

jQuery中map函数的两种方式

2017/04/07 jQuery

[02:36]DOTA2英雄基础教程帕格纳

2014/01/20 DOTA

python的re模块应用实例

2014/09/26 Python

Python编程中用close()方法关闭文件的教程

2015/05/24 Python

spyder常用快捷键(分享)

2017/07/19 Python

Python使用Turtle模块绘制五星红旗代码示例

2017/12/11 Python

python中文乱码不着急，先看懂字节和字符

2017/12/20 Python

python3实现二叉树的遍历与递归算法解析(小结)

2019/07/03 Python

python实现批量处理将图片粘贴到另一张图片上并保存

2019/12/12 Python

python plotly画柱状图代码实例

2019/12/13 Python

Python+opencv+pyaudio实现带声音屏幕录制

2019/12/23 Python

python 利用已有Ner模型进行数据清洗合并代码

2019/12/24 Python

将python包发布到PyPI和制作whl文件方式

2019/12/25 Python

pycharm实现print输出保存到txt文件

2020/06/01 Python

anaconda升级sklearn版本的实现方法

2021/02/22 Python

GoPro摄像机美国官网：美国运动相机厂商

2018/07/03 全球购物

What is the purpose of Void class? Void类的作用是什么？

2016/10/31 面试题

人事科岗位职责范本

2014/03/02 职场文书

感恩老师演讲稿600字

2014/08/28 职场文书

大学生个人总结范文

2015/02/15 职场文书

2015年学校安全管理工作总结

2015/05/11 职场文书

七年级作文（600字3篇）

2019/09/24 职场文书

导游词之山西-五老峰

2019/10/07 职场文书

Java新手教程之ArrayList的基本使用

2021/06/20 Java/Android