<!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 实现简单的导航下拉列表的更多相关文章

  1. react-native 简单的导航

    默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎 ...

  2. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  3. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. require.js 模块化简单理解

    组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...

  5. 基于node+koa2+mongodb实现简单的导航管理系统

    基于node+koa2+mongodb实现简单的导航管理系统 项目说明 本项目gitbub地址 https://github.com/xuess/nav-admin,喜欢请star 基于node 实现 ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. Sea.js提供简单、极致的模块化开发体验

    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...

  8. js实现无限级树形导航列表

  9. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. verilog的function使用

    语法: function [range] function_id;    input_declaration    other_declarations    procedural_statement ...

  2. [LC] 71. Simplify Path

    Given an absolute path for a file (Unix-style), simplify it. Or in other words, convert it to the ca ...

  3. asp.net mvcview界面does not contain a definition

    在cshtml使用linq操作数据集,自动补全是可以使用Select,但是一直提示System.Collection.GenericList' does not contain a definitio ...

  4. 利用.swp文件恢复源文件

    使用命令 vim -r filename.swp 保存即可

  5. .js——alert()语句

    在.js文件中,通过alert()语句可以生成弹出框,弹出框中的内容message部分可以是常量字符串,也可以是含有变量的字符串连接,下面举几个例子简要说明下: 1. 参数为常量字符串 alert(& ...

  6. HihoCode-1675-稀疏矩阵乘积

    上来先一顿暴力,结果70分就超时了. 然后意识到稀疏矩阵,有很多0,如果c[i][j] != 0,那么一定存在至少一个k满足a[i][k] != 0 && b[k][j] != 0; ...

  7. 吴裕雄--天生自然 R语言开发学习：回归（续二）

    #------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...

  8. java 通过数据库名获得 该数据所有的表名以及字段名、字段类型

    package com.nf.lc.sql_meta_data; import java.sql.*; import java.util.HashMap; import java.util.Map; ...

  9. sql性能优化浅谈

    sql性能优化总结: 最近随着数据越来越多,数据库性能问题暴露的越来越严重.几百万,上千万,甚至过亿的数据处理速度会非常的慢. 下面对工作中遇到的问题做下总结,希望以后能对日后的工作有所帮助. 不同的 ...

  10. python——pymysql的安装

    pymysql是python程序连接mysql数据库的的第三方库,通过运行import pymysql 查看系统中是否有该模块,没有的话需要自行安装. 安装教程如下: 1.下载pymysql安装包,下 ...