编程 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的闭包

Dec 31 Javascript

JavaScript初学者应注意的七个细节详细介绍

Dec 27 Javascript

js 获取radio按钮值的实例

Aug 17 Javascript

jqgrid 表格数据导出实例

Nov 21 Javascript

原生JS操作网页给p元素添加onclick事件及表格隔行变色

Dec 01 Javascript

JS实现控制表格只显示行边框或者只显示列边框的方法

Mar 31 Javascript

基于jQuery1.9版本如何判断浏览器版本类型

Jan 12 Javascript

jquery实现异步加载图片（懒加载图片一种方式）

Apr 24 jQuery

小程序图片长按识别功能的实现方法

Aug 30 Javascript

微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

Jan 23 Javascript

JavaScript 实现下雪特效的示例代码

Sep 09 Javascript

JavaScript实现两个数组的交集

Mar 25 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

Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划！

2020/03/06 日漫

PHP实现数字补零功能的2个函数介绍

2014/05/12 PHP

PHP实现的汉字拼音转换和公历农历转换类及使用示例

2014/07/01 PHP

php数组索引的Key加引号和不加引号的区别

2014/08/19 PHP

Mac OS下配置PHP＋MySql环境

2015/02/25 PHP

Zend Framework开发入门经典教程

2016/03/23 PHP

ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法

2018/09/26 PHP

PHP 文件上传限制问题

2019/09/01 PHP

JavaScript高级程序设计学习笔记 js高级技巧

2011/09/20 Javascript

用jquery模仿的a的title属性(兼容ie6/7)

2013/01/21 Javascript

document.execCommand()的用法小结

2014/01/08 Javascript

利用try-catch判断变量是已声明未声明还是未赋值

2014/03/12 Javascript

javascript实现图像循环明暗变化的方法

2015/02/25 Javascript

学习使用grunt来打包JavaScript和CSS程序的教程

2016/01/04 Javascript

bootstrap table单元格新增行并编辑

2017/05/19 Javascript

JS自定义对象创建与简单使用方法示例

2020/01/15 Javascript

[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

python定时利用QQ邮件发送天气预报的实例

2017/11/17 Python

django将图片上传数据库后在前端显式的方法

2018/05/25 Python

详解Python中pyautogui库的最全使用方法

2020/04/01 Python

Python+logging输出到屏幕将log日志写入文件

2020/11/11 Python

python正则表达式re.match()匹配多个字符方法的实现

2021/01/27 Python

浅析HTML5：'data-'属性的作用

2018/01/23 HTML / CSS

蔻驰意大利官网：COACH意大利

2019/01/16 全球购物

意大利奢侈品零售商：ilDuomo Novara

2019/09/11 全球购物

德国Discount-Apotheke中文官网：DC德式康线上药房

2020/02/18 全球购物

关键字final的用法

2013/10/02 面试题

物业管理个人自我评价

2013/11/08 职场文书

计算机毕业生求职信

2014/06/10 职场文书

物业保安岗位职责

2014/07/02 职场文书

找工作求职信

2014/07/07 职场文书

新闻学专业职业生涯规划范文：我的人生我做主

2014/09/12 职场文书

教师节校长致辞

2015/07/31 职场文书

Python开发工具Pycharm的安装以及使用步骤总结

2021/06/24 Python

Python基于百度API识别并提取图片中文字

2021/06/27 Python

Jpa Specification如何实现and和or同时使用查询

2021/11/23 Java/Android