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 职场文书