脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js左侧分类导航下拉菜单

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

 更新时间：2020年11月25日 10:32:26   作者：aubin  
这篇文章主要为大家详细介绍了javascript仿京东导航左侧分类导航下拉菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了类似于京东、淘宝商城左侧分类导航下拉菜单，供大家参考，具体内容如下

效果图：

 

实现代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="gb2312">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <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>
 <script>
  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>
 <ul class="ul">
  <li>
   <a href="">类别1</a>
   <div class="div">
    <dl>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
  </li>
  <li>
  <a href="">类别2</a>
   <div class="div">
    <dl>
     <dd>类别2</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
  </li>
  <li><a href="">类别3</a><div class="div">
    <dl>
     <dd>类别3</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
   </li>
  <li><a href="">类别4</a><div class="div">
    <dl>
     <dd>类别4</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
   </li>
  <li><a href="">类别5</a><div class="div">
    <dl>
     <dd>类别5</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
   </li>
  <li><a href="">类别6</a><div class="div">
    <dl>
     <dd>类别6</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
   </li>
  <li><a href="">类别7</a><div class="div">
    <dl>
     <dd>类别7</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
   </li>
  <li><a href="">类别8</a><div class="div">
    <dl>
     <dd>类别8</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
     <dd>类别1</dd>
    </dl>
   </div>
   </li>
 </ul>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • 微信小程序多列选择器range-key使用详解

    微信小程序多列选择器range-key使用详解

    这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Javascript实现hashcode函数实现对象比较与原理说明

    Javascript实现hashcode函数实现对象比较与原理说明

    在JavaScript中，数值的比较是比较简单的，使用相等（==）和全等（===）符号基本上可以解决大多数非对象的比较。但是相等（==）和全等（===）符号在对象 object 的比较上，就不能满足所有的要求了
    2023-06-06
  • 微信小程序实现图片选择并预览功能

    微信小程序实现图片选择并预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片选择并预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 简单实现jQuery轮播效果

    简单实现jQuery轮播效果

    这篇文章主要教大家如何简单实现jQuery轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript在form表单中使用button按钮实现submit提交方法

    JavaScript在form表单中使用button按钮实现submit提交方法

    在form表单提交中，使用button来间接完成submit的提交更为灵活。接下来通过本文给大家介绍JavaScript在form表单中使用button按钮实现submit提交方法，需要的朋友参考下吧
    2017-01-01
  • JavaScript加载导出STL文件的示例详解

    JavaScript加载导出STL文件的示例详解

    STL是一种用于表示3D模型表面的文件格式,通常由三角形面片组成,STL 文件可以是ASCII（文本）或二进制格式,其中二进制格式更为常见,因为它更紧凑且加载速度更快,本文给大家介绍了javascript加载导出 STL文件的示例,需要的朋友可以参考下
    2024-12-12
  • js文件中调用js的实现方法小结

    js文件中调用js的实现方法小结

    JavaScript文件引用JavaScript文件的方法，需要的朋友可以参考下。
    2009-10-10
  • javascript框架设计读书笔记之模块加载系统

    javascript框架设计读书笔记之模块加载系统

    本文是司徒正美的《javascript框架设计》的第二章模块加载系统的读书笔记，根据自己的理解，简要的跟大家讲述了本章的主要内容，方便大家更好的学习。
    2014-12-12
  • jsonp跨域获取百度联想词的方法分析

    jsonp跨域获取百度联想词的方法分析

    这篇文章主要介绍了jsonp跨域获取百度联想词的方法,结合实例形式分析了jsonp的原理及跨域获取百度联想词的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 微信小程序实现固定表头、列表格组件

    微信小程序实现固定表头、列表格组件

    这篇文章主要介绍了微信小程序实现固定表头、列表格组件的相关资料,这个功能在我们进行小程序开发的时候非常实用,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07

最新评论