js 实现简单的导航下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
li{width:100px;height:30px;line-height:30px;float:left;border:1px solid #000;text-align:center;background:#00FFFF;list-style:none;position:relative;}
li div{position:absolute;top:30px;left:0;filter:alpha(opacity=0);opacity:0;width:100%; height:0;overflow:hidden;}
/*这里的height:必须要写,overflow:也必须要写,不然没有下拉的效果*/
</style>
<script src="perfectStartMove.js"></script>
<script>
window.onload = function(){
var arrLi = document.getElementsByTagName('li');
for(var i=0;i<arrLi.length;i++){
arrLi[i].onmouseover = function(){
var oDiv = this.getElementsByTagName('div')[0];
oDiv.style.height = 'auto';
var heightVlaue = oDiv.offsetHeight;
oDiv.style.height = 0;
perfectStartMove(oDiv,{height:heightVlaue,opacity:100}); }; arrLi[i].onmouseout = function(){
var oDiv = this.getElementsByTagName('div')[0];
perfectStartMove(oDiv,{height:0,opacity:0}); };
}
};
</script>
</head> <body>
<ul>
<li>
首页
<div>
第三十<br />
esfsdfds <br />
dfdfd <br />
fd
</div>
</li>
<li>
产品
<div>
fcd<br />
esfsdfds <br />
dfdfd
</div>
</li>
<li>
联系我们
<div>
读书三<br />
ttt <br />
dfdfd <br />
fd
</div>
</li>
</ul>
</body>
</html>
js 实现简单的导航下拉列表的更多相关文章
- react-native 简单的导航
默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎 ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- require.js 模块化简单理解
组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...
- 基于node+koa2+mongodb实现简单的导航管理系统
基于node+koa2+mongodb实现简单的导航管理系统 项目说明 本项目gitbub地址 https://github.com/xuess/nav-admin,喜欢请star 基于node 实现 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- Sea.js提供简单、极致的模块化开发体验
为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...
- js实现无限级树形导航列表
- 投票系统 & js脚本简单刷票
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 接口测试-chap4-关联接口测试
关联接口测试指:请求第2个接口之前必须先请求第一个接口 1.请求第2个接口时需要带着第一个请求返回的cookie 2.如果不使用cookie,如何进行关联接口测试:使用session保持连接.可以代替 ...
- ffmpeg android移植
CMake语法简介(androidstudio中利用CMake开发NDK): http://blog.csdn.net/u013718120/article/details/62883711FFmpe ...
- 格式化MyEclipse代码(java、jsp、js)行的长度@修改java代码字体@修改Properties文件编码方式
每次用MyEclipse/Eclipse自带的快捷键Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行.如果想格式化代码后不想让代码换行可以通过以下方式 ...
- C# 输出&输入&类型强制转换
输入字符串 String s; s=Console.ReadLine(); 输出字符串 Console.WritrLine(s); 输出分两种 ①占位符输出:Console.WriteLine(&qu ...
- Python---13面向对象编程
一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...
- python编程基础之集合
集合是是基本数据类型的一种集合类型. 作用:去重 属性:intersection.union.difference.issubset 实例: list_1=[1,2,3,4,3,5,2,6,1]lis ...
- 扎心!来自互联网er的2019年度总结,看完笑着流泪……
转眼2019年已经接近尾声,又到了年度总结的时候了.过去一年,你加了多少班,熬了多少夜,回想起来历历在目.互联网人2019年度总结,看完扎心了-- 01 - 这一年里 你一共提了275个需求 其中27 ...
- Hexo之旅(四):文章编写技巧
hexo 编写文章可以使用以下命令创建hexo new "文件名" #创建的文章会在_pots目录下文章的后缀名是以md命名的文件格式,遵循markdown语法,所以编写文章可以使 ...
- Android实习生 —— 屏幕适配及布局优化
为什么要进行屏幕适配.对哪些设备进行适配?在近几年的发展当中,安卓设备数量逐渐增长,由于安卓设备的开放性,导致安卓设备的屏幕尺寸大小碎片化极为严重.从[友盟+]2016年手机生态发展报告H1中看截止1 ...
- js的几个库
http://www.w3.org/TR/FileAPI/ http://www.w3.org/TR/html-media-capture/ demo:http://jsfiddle.net/pmat ...