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

一个判断email合法性的函数[非正则]

Dec 09 Javascript

jquery验证邮箱格式是否正确实例讲解

Nov 16 Javascript

如何在Linux上安装Node.js

Apr 01 Javascript

node.js连接mongoDB数据库快速搭建自己的web服务

Apr 17 Javascript

30分钟快速掌握Bootstrap框架

May 24 Javascript

jquery ajaxfileupload异步上传插件使用详解

Feb 08 Javascript

js实现3d悬浮效果

Feb 16 Javascript

又一款MVVM组件构建自己的Vue组件（2）

Mar 13 Javascript

js获取元素的偏移量offset简单方法(必看)

Jul 05 Javascript

Mobile Web开发基础之四--处理手机设备的横竖屏问题

Aug 11 Javascript

vue awesome swiper异步加载数据出现的bug问题

Jul 03 Javascript

如何利用JS将手机号中间四位变成*号

Sep 29 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

JAVA/JSP学习系列之七

2006/10/09 PHP

php5.3 goto函数介绍和示例

2014/03/21 PHP

PHP base64编码后解码乱码的解决办法

2014/06/19 PHP

Laravel路由研究之domain解决多域名问题的方法示例

2019/04/04 PHP

laravel-admin select框默认选中的方法

2019/10/03 PHP

Laravel Reponse响应客户端示例详解

2020/09/03 PHP

Javascript的一种模块模式

2008/03/22 Javascript

基于insertBefore制作简单的循环插空效果

2015/09/21 Javascript

AngularJS 与百度地图的结合实例

2016/10/20 Javascript

js事件委托和事件代理案例分享

2017/07/25 Javascript

原生js实现仿window10系统日历效果的实例

2017/10/31 Javascript

C#实现将一个字符转换为整数

2017/12/12 Javascript

工作中常用到的ES6语法

2018/09/04 Javascript

基于Vue实现可以拖拽的树形表格实例详解

2018/10/18 Javascript

jQuery实现的点击图片居中放大缩小功能示例

2019/01/16 jQuery

前端js中的事件循环eventloop机制详解

2019/05/15 Javascript

javascript设计模式 ? 抽象工厂模式原理与应用实例分析

2020/04/09 Javascript

JavaScript eval()函数定义及使用方法详解

2020/07/07 Javascript

带你使用webpack快速构建web项目的方法

2020/11/12 Javascript

[01:09:19]DOTA2-DPC中国联赛正赛 VG vs Aster BO3 第二场 2月28日

2021/03/11 DOTA

Phantomjs抓取渲染JS后的网页（Python代码）

2016/05/13 Python

Python global全局变量函数详解

2018/09/18 Python

python3+opencv3识别图片中的物体并截取的方法

2018/12/05 Python

对Python多线程读写文件加锁的实例详解

2019/01/14 Python

Django 响应数据response的返回源码详解

2019/08/06 Python

Python 中@property的用法详解

2020/01/15 Python

HTML5实时语音通话聊天MP3压缩传输3KB每秒

2019/08/28 HTML / CSS

彪马俄罗斯官网：PUMA俄罗斯

2019/07/13 全球购物

写出程序把一个链表中的接点顺序倒排

2014/04/28 面试题

化学教师教学反思

2014/01/17 职场文书

爱情检讨书大全

2014/01/21 职场文书

2014市国税局对照检查材料思想汇报

2014/09/23 职场文书

2015年公司中秋节致辞

2015/07/31 职场文书

2016年度师德标兵先进事迹材料

2016/02/26 职场文书

Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法

2022/04/06 数码科技

如何通过cmd 连接阿里云服务器

2022/04/18 Servers