编程 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 Event学习第六章事件的访问

Feb 07 Javascript

onbeforeunload与onunload事件异同点总结

Jun 24 Javascript

计算新浪Weibo消息长度(还可以输入119字)

Jul 02 Javascript

jQuery实现购物车计算价格功能的方法

Mar 25 Javascript

JavaScript弹窗基础篇

Apr 27 Javascript

Javascript继承机制详解

May 30 Javascript

10 种最常见的 Javascript 错误(频率最高)

Feb 08 Javascript

webpack4.0打包优化策略整理小结

Mar 30 Javascript

微信小程序websocket聊天室的实现示例代码

Feb 12 Javascript

基于vue实现一个禅道主页拖拽效果

May 27 Javascript

angularjs自定义过滤器demo示例

Aug 24 Javascript

Vue分页效果与购物车功能

Dec 13 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

收听短波不可能有声音清晰的品质吗

2021/03/01 无线电

收音机史话 - 1960年代前后的DIY

2021/03/02 无线电

注意:php5.4删除了session_unregister函数

2013/08/05 PHP

js玩一玩WSH吧

2007/02/23 Javascript

JQuery对checkbox操作（循环获取）

2011/05/20 Javascript

Javascript 面向对象（一）(共有方法，私有方法，特权方法)

2012/05/23 Javascript

js+css实现增加表单可用性之提示文字

2013/06/03 Javascript

js动态生成指定行数的表格

2013/07/11 Javascript

XMLHttpRequest处理xml格式的返回数据(示例代码)

2013/11/21 Javascript

node.js中的fs.chmod方法使用说明

2014/12/18 Javascript

js实现适用于素材网站的黑色多级菜单导航条效果

2015/08/24 Javascript

第三章之Bootstrap 表格与按钮功能

2016/04/25 Javascript

jQuery实现点击按钮文字变成input框点击保存变成文字

2016/05/09 Javascript

JS实现颜色梯度与渐变效果完整实例

2016/12/30 Javascript

Node.js获取前端ajax提交的request信息

2017/02/20 Javascript

用vue封装插件并发布到npm的方法步骤

2017/10/18 Javascript

解决ie11 SCRIPT5011:不能执行已释放Script的代码问题

2019/05/05 Javascript

layer弹出层取消遮罩的方法

2019/09/25 Javascript

layui实现数据表格隐藏列的示例

2019/10/25 Javascript

[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访

2014/07/15 DOTA

[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局

2016/03/02 DOTA

[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局

2016/03/04 DOTA

windows系统中python使用rar命令压缩多个文件夹示例

2014/05/06 Python

Python探索之自定义实现线程池

2017/10/27 Python

python 实现将字典dict、列表list中的中文正常显示方法

2018/07/06 Python

简单了解django orm中介模型

2019/07/30 Python

Python代理IP爬虫的新手使用教程

2019/09/05 Python

CSS3实现精美横向滚动菜单按钮

2017/04/14 HTML / CSS

斯德哥尔摩通票：Stockholm Pass

2018/01/09 全球购物

外贸实习生自荐信范文

2013/11/24 职场文书

社区敬老月活动实施方案

2014/02/17 职场文书

2014年置业顾问工作总结

2014/11/17 职场文书

2014年学校团委工作总结

2014/12/20 职场文书

扬州个园导游词

2015/02/06 职场文书

MySQL root密码的重置方法

2021/04/21 MySQL

python元组打包和解包过程详解

2021/08/02 Python