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

让iframe自适应高度（支持XHTML，支持FF）

Jul 24 Javascript

IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

Jul 31 Javascript

jQuery实现文件上传进度条特效

Aug 12 Javascript

实现JavaScript高性能的数据存储

Dec 11 Javascript

js中删除数组中的某一元素实例(无下标时)

Feb 28 Javascript

jQuery日程管理控件glDatePicker用法详解

Mar 29 jQuery

Angular 4 指令快速入门教程

Jun 07 Javascript

JS库之ParticlesJS使用简介

Sep 12 Javascript

基于webpack-hot-middleware热加载相关错误的解决方法

Feb 22 Javascript

Node.js实现简单的爬取的示例代码

Jun 25 Javascript

使用axios请求时,发送formData请求的示例

Oct 29 Javascript

jQuery AJAX应用实例总结

May 19 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中几种常见的超时处理全面总结

2012/09/11 PHP

php中explode的负数limit用法分析

2015/02/27 PHP

php生成txt文件实例代码介绍

2016/04/28 PHP

告诉大家什么是JSON

2008/06/10 Javascript

js获取元素在浏览器中的绝对位置

2010/07/24 Javascript

Javascript学习笔记二之变量

2010/12/15 Javascript

JavaScript获取/更改文本框的值的实例代码

2013/08/02 Javascript

javascript学习笔记（三）BOM和DOM详解

2014/09/30 Javascript

详解jquery中$.ajax方法提交表单

2014/11/03 Javascript

js简单实现竖向tab选项卡的方法

2015/05/04 Javascript

jQuery插件实现文字无缝向上滚动效果代码

2016/02/25 Javascript

Angular工具方法学习

2016/12/26 Javascript

如何提高数据访问速度

2016/12/26 Javascript

基于jQuery实现的打字机效果

2017/01/16 Javascript

Bootstrap Table 删除和批量删除

2017/09/22 Javascript

微信小程序自定义toast组件的方法详解【含动画】

2019/05/11 Javascript

浅谈一种让小程序支持JSX语法的新思路

2019/06/16 Javascript

layer弹窗在键盘按回车将反复刷新的实现方法

2019/09/25 Javascript

[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日

2021/03/11 DOTA

python psutil库安装教程

2018/03/19 Python

对Tensorflow中的变量初始化函数详解

2018/07/27 Python

python数据批量写入ScrolledText的优化方法

2018/10/11 Python

PyQt5实现类似别踩白块游戏

2019/01/24 Python

详解python中__name__的意义以及作用

2019/08/07 Python

Python学习笔记之For循环用法详解

2019/08/14 Python

TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现

2020/02/17 Python

python微信公众号开发简单流程实现

2020/03/09 Python

用Python 爬取猫眼电影数据分析《无名之辈》

2020/07/24 Python

详解python中的闭包

2020/09/07 Python

阿里巴巴国际站：Alibaba.com

2016/07/21 全球购物

解释下面关于J2EE的名词

2013/11/15 面试题

经理秘书求职自荐信范文

2014/03/23 职场文书

春秋淹城导游词

2015/02/11 职场文书

入党申请书怎么写?

2019/06/11 职场文书

详解nodejs内置模块

2021/05/06 NodeJs

详解SQL报错盲注

2022/07/23 SQL Server