javascript仿京东导航左侧分类导航下拉菜单效果

2016-07-19来源：易贤网

这篇文章主要为大家详细介绍了javascript仿京东导航左侧分类导航下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

效果图：

实现代码：

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

.ul{position:relative;width:200px;height:auto;}

.ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}

.ul li a{display:block;background:#fff;color:#000;text-decoration:none;}

.ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}

.ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}

.ul li div dl dd{float:left; width:100px;}

.ul .liname div{display:block;}

</style>

window.onload=function(){

var aLi=document.getElementsByTagName("li");

for(var i=0;aLi.length>i;i++){

aLi[i].i=i;

aLi[i].onmouseover=function(){

this.className="liname";

var h1=this.i*25;

var h2=this.getElementsByTagName("div")[0].offsetHeight;

if(h2<h1){

this.getElementsByTagName("div")[0].style.top=h1+'px';

}

aLi[i].onmouseout=function(){

this.className="";

}

</script>

</head>

<body>

<li>

<dl>

</dl>

</div>

</li>

<li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

<dl>

</dl>

</div>

</li>

</ul>

</body>

</html>

希望本文所述对大家学习javascript程序设计有所帮助。

2026公务员·事业单位培训课程试听报名

报班类型
姓名
手机号
验证码

推荐信息

Shell中如何删除文本比较长的行的实现方法

vue.js语法及常用指令

python 读写中文json的实例详解

Objective-C Json 实例详解

bootstrap table sum总数量统计实现方法

python生成二维码的实例详解

Python批量更改文件名的实现方法

解决出现Incorrect integer value的问题

jQuery实现切换隐藏与显示同时切换图标功能

docker python api 安装配置的详解

javascript按钮禁用和启用的效果实例代码

vue.js todolist实现代码

vue.js 父向子组件传参的实例代码

apache 开启重定向 rewrite的实现方法

Vue.js划分组件的方法

python logging日志模块的详解

vue中的scope使用详解

docker cgroup 资源监控的详解

使用Android Studio 开发自己的SDK教程

linux系统下MongoDB单节点安装教程