javascript仿京东导航左侧分类导航下拉菜单效果_易贤网_足球游戏

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

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

来源：易贤网阅读：1810 次日期：2016-07-19 13:47:47

温馨提示：易贤网小编为您整理了“javascript仿京东导航左侧分类导航下拉菜单效果”,方便广大网友查阅！

这篇文章主要为大家详细介绍了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程序设计有所帮助。

中国足彩网信息请查看网络编程

上一篇：javascript函数命名的三种方式及区别介绍

下一篇：JS中多种方式创建对象详解

易贤网手机网站地址：javascript仿京东导航左侧分类导航下拉菜单效果

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！

最新信息

西双版纳州面向2024届医学专业高校毕业生招聘大学生乡村医生综合成绩公示

2024年大理州司法局遴选公务员面试及综合成绩公告

2024年西双版纳州妇幼保健院招聘非在编医生助理和行政管理人员公告

2024年临沧市双江县林业和草原局招聘专职生态护林员公告

2024年怒江州福贡县医学专业大学生招聘公告

2024年德宏州瑞丽市机关事务管理局招聘公益性岗位公告

2024年文山州砚山县财政局招聘公益性岗位工作人员公告

2024年文山州丘北县第七批城镇公益性岗位招聘公告

2024年文山城北片区幼儿园招聘公告

2025年楚雄州教育体育局直属高中学校专业技术人才引进补充公告

公考类

云南公务员贵州公务员四川公务员广西公务员各省公务员国家公务员选调遴选

招聘类

事业单位中国足彩网特岗教师三支一扶志愿者银行招聘国企招聘

各类考试

学历升学会计考试职业资格外语考试医学考试工程考试教师资格

足球游戏_中国足彩网￥体育资讯$