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

深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点

Jan 15 Javascript

jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

Sep 29 Javascript

javascript的正则匹配方法学习

Feb 24 Javascript

js图片切换具体实现代码

Oct 13 Javascript

JS 实现随机验证码功能

Feb 15 Javascript

原生js实现鼠标跟随效果

Feb 28 Javascript

javascript 跨域问题以及解决办法

Jul 17 Javascript

AngularJS的$location使用方法详解

Oct 19 Javascript

解读ES6中class关键字

Nov 20 Javascript

微信小程序调用天气接口并且渲染在页面过程详解

Jun 24 Javascript

JS实现导航栏楼层特效

Jan 01 Javascript

JS实现简单控制视频播放倍速的实例代码

Apr 18 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

推荐十款免费 WordPress 插件

2015/03/24 PHP

PHP基于工厂模式实现的计算器实例

2015/07/16 PHP

php制作基于xml的RSS订阅源功能示例

2017/02/08 PHP

CI框架网页缓存简单用法分析

2018/12/26 PHP

laravel实现查询最后执行的一条sql语句的方法

2019/10/09 PHP

PHP实现倒计时功能

2020/11/16 PHP

asp.net和asp下ACCESS的参数化查询

2008/06/11 Javascript

如何确保JavaScript的执行顺序之实战篇

2011/03/03 Javascript

5秒后跳转效果(setInterval/SetTimeOut)

2013/05/03 Javascript

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

2015/06/08 Javascript

js eval函数使用,js对象和字符串互转实例

2017/03/06 Javascript

JSONP基础知识详解

2017/03/19 Javascript

JS实现json对象数组按对象属性排序操作示例

2018/05/18 Javascript

详解vue使用vue-layer-mobile组件实现toast，loading效果

2018/08/31 Javascript

elementUI Tree 树形控件的官方使用文档

2019/04/25 Javascript

微信小程序自定义弹窗实现详解(可通用）

2019/07/04 Javascript

基于PHP pthreads实现多线程代码实例

2020/06/24 Javascript

[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG

2018/04/03 DOTA

Python中splitlines()方法的使用简介

2015/05/20 Python

Python-嵌套列表list的全面解析

2016/06/08 Python

深入浅析ImageMagick命令执行漏洞

2016/10/11 Python

Python多线程中阻塞(join)与锁(Lock)使用误区解析

2018/04/27 Python

Python关于excel和shp的使用在matplotlib

2019/01/03 Python

Python实现TCP探测目标服务路由轨迹的原理与方法详解

2019/09/04 Python

Python 导入文件过程图解

2019/10/15 Python

用python解压分析jar包实例

2020/01/16 Python

解决TensorFlow GPU版出现OOM错误的问题

2020/02/03 Python

python 三种方法实现对Excel表格的读写

2020/11/19 Python

Python 实现劳拉游戏的实例代码（四连环、重力四子棋）

2021/03/03 Python

联想阿根廷官方网站：Lenovo Argentina

2019/10/14 全球购物

消防安全责任书范本

2014/04/15 职场文书

安全生产计划书

2014/05/04 职场文书

表彰大会策划方案

2014/05/13 职场文书

软件售后服务方案

2014/05/29 职场文书

求职自荐信范文（优秀篇）

2015/03/27 职场文书

跟班学习心得体会（共6篇）

2016/01/23 职场文书