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

基于jQuery的输入框无值自动显示指定数据的实现代码

Jan 24 Javascript

用dtree实现树形菜单 dtree使用说明

Oct 17 Javascript

JS、CSS加载中的小问题探讨

Nov 26 Javascript

jquery实现的导航固定效果

Apr 28 Javascript

文本框倒叙输入让输入框的焦点始终在最开始的位置

Sep 01 Javascript

JAVA四种基本排序方法实例总结

Jul 24 Javascript

jQuery自定义滚动条完整实例

Jan 08 Javascript

详解Angular 开发环境搭建

Jun 22 Javascript

ionic2屏幕适配实现适配手机、平板等设备的示例代码

Aug 11 Javascript

Vue组件库发布到npm详解

Feb 17 Javascript

基于 Immutable.js 实现撤销重做功能的实例代码

Mar 01 Javascript

JQuery常用选择器功能与用法实例分析

Dec 23 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+xml实现在线英文词典之添加词条的方法

2015/01/23 PHP

php+ajax实时刷新简单实例

2015/02/25 PHP

Laravel登录失败次数限制的实现方法

2020/08/26 PHP

zeroclipboard复制到剪切板的flash

2010/08/04 Javascript

JavaScript与Image加载事件(onload)、加载状态(complete)

2011/02/14 Javascript

表单JS弹出填写提示效果代码

2011/04/16 Javascript

编写针对IE的JS代码两种编写方法

2013/01/30 Javascript

设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

2013/03/26 Javascript

jquery实现背景墙聚光灯效果示例分享

2014/03/02 Javascript

基于jQuery和CSS3制作响应式水平时间轴附源码下载

2015/12/20 Javascript

AngularJS ng-table插件设置排序

2016/09/21 Javascript

基本DOM节点操作

2017/01/17 Javascript

touch.js 拖动、缩放、旋转（鼠标手势）功能代码

2017/02/04 Javascript

JS实现直接运行html代码的方法

2017/03/13 Javascript

实战node静态文件服务器的示例代码

2018/03/08 Javascript

Express本地测试HTTPS的示例代码

2018/06/06 Javascript

vue 项目打包通过命令修改 vue-router 模式修改 API 接口前缀

2018/06/13 Javascript

原生JS实现简单的倒计时功能示例

2018/08/30 Javascript

vue中组件的过渡动画及实现代码

2018/11/21 Javascript

JavaScript惰性载入函数实例分析

2019/03/27 Javascript

基于vue+echarts数据可视化大屏展示的实现

2020/12/25 Vue.js

[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访神秘商人痛陈生计不易

2018/04/05 DOTA

python清除字符串里非字母字符的方法

2015/07/02 Python

python脚本监控Tomcat服务器的方法

2018/07/06 Python

远程部署工具Fabric详解（支持Python3）

2019/07/04 Python

PyTorch加载预训练模型实例(pretrained)

2020/01/17 Python

在python3.64中安装pyinstaller库的方法步骤

2020/06/02 Python

Python中random模块常用方法的使用教程

2020/10/04 Python

python opencv角点检测连线功能的实现代码

2020/11/24 Python

Python之Sklearn使用入门教程

2021/02/19 Python

阿联酋团购网站：Groupon阿联酋

2016/10/14 全球购物

斯巴达比赛商店：Spartan Race

2019/01/08 全球购物

游戏商店：Eneba

2020/04/25 全球购物

师范教师毕业鉴定

2014/01/13 职场文书

教师年度考核评语

2014/04/28 职场文书

法人代表授权委托书范文

2014/09/10 职场文书