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

通过ifame指向的页面高度调整iframe的高度

Oct 05 Javascript

Javascript 代码也可以变得优美的实现方法

Jun 22 Javascript

jQuery超简单选项卡完整实例

Sep 26 Javascript

详解jQuery Mobile自定义标签

Jan 06 Javascript

Vue.js Ajax动态参数与列表显示实现方法

Oct 20 Javascript

js控制一个按钮是否可点击(可使用)disabled的实例

Feb 14 Javascript

webpack配置文件和常用配置项介绍

Apr 28 Javascript

浅谈jquery fullpage 插件增加头部和版权的方法

Mar 20 jQuery

vue实现多条件和模糊搜索功能

May 28 Javascript

nest.js 使用express需要提供多个静态目录的操作方法

Oct 24 Javascript

vue路由守卫,限制前端页面访问权限的例子

Nov 11 Javascript

vue实现前端列表多条件筛选

Oct 26 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设计模式 Singleton(单例模式)

2011/06/26 PHP

PHP实现自动发送邮件功能代码(qq 邮箱)

2017/08/18 PHP

JQuery中根据属性或属性值获得元素(6种情况获取方法)

2013/01/17 Javascript

JS在IE下缺少标识符的错误

2014/07/23 Javascript

jQuery中prop()方法用法实例

2015/01/05 Javascript

js淡入淡出的图片轮播效果代码分享

2015/08/24 Javascript

JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

2016/06/14 Javascript

JavaScript数组的5种迭代方法

2017/09/29 Javascript

浅谈vue单一组件下动态修改数据时的全部重渲染

2018/03/01 Javascript

opencv 识别微信登录验证滑动块位置

2018/08/07 Javascript

jquery实现自定义树形表格的方法【自定义树形结构table】

2019/07/12 jQuery

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

2020/01/02 Javascript

js里面的变量范围分享

2020/07/18 Javascript

nuxt 服务器渲染动态设置 title和seo关键字的操作

2020/11/05 Javascript

JavaScript实现消消乐的源代码

2021/01/12 Javascript

Python写的英文字符大小写转换代码示例

2015/03/06 Python

详解Python中的__new__()方法的使用

2015/04/09 Python

在Django的视图(View)外使用Session的方法

2015/07/23 Python

Ruby元编程基础学习笔记整理

2016/07/02 Python

Python实现网站注册验证码生成类

2017/06/08 Python

Python基础语言学习笔记总结（精华）

2017/11/14 Python

使用Python微信库itchat获得好友和群组已撤回的消息

2018/06/24 Python

在python中只选取列表中某一纵列的方法

2018/11/28 Python

在Python中字典根据多项规则排序的方法

2019/01/21 Python

Pytorch实现的手写数字mnist识别功能完整示例

2019/12/13 Python

Python基于os.environ从windows获取环境变量

2020/06/09 Python

python怎么判断素数

2020/07/01 Python

Python性能测试工具Locust安装及使用

2020/12/01 Python

Jupyter Notebook添加代码自动补全功能的实现

2021/01/07 Python

萌新的HTML5 入门指南

2020/11/06 HTML / CSS

GUESS西班牙官方网上商城：美国服饰品牌

2017/03/15 全球购物

加拿大时尚床上用品零售商：QE Home | Quilts Etc

2018/01/22 全球购物

香港现代设计家具品牌：Ziinlife Furniture

2018/11/13 全球购物

大学专科求职信

2014/07/02 职场文书

2015年档案管理员工作总结

2015/05/13 职场文书

68句权威创业名言

2019/08/26 职场文书