首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 25, 2020

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

效果图：

 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程序设计有所帮助。

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

- Author -

aubin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 继承详解（一）
Jul 13 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
Sep 16 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
vue组件父子间通信详解（三）
Nov 07 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
JS中多种方式创建对象详解
Mar 22 #Javascript
基于jquery实现无限级树形菜单
Mar 22 #Javascript
javascript的几种继承方法介绍
Mar 22 #Javascript
基于javascript实现文字无缝滚动效果
Mar 22 #Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 #Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 #Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 #Javascript
口号(179) 报告(147) 说明书(38) 计划(88) 工作总结(1972) 协议书(568) 党团范文(807) 标语(336) 汇报材料(247) 任命书(51)
You might like
php allow_url_include的应用和解释
2010/04/22 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）
2019/02/02 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python中的rjust()方法使用详解
2015/05/19 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python tornado上传文件的功能
2020/03/26 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Django中template for如何使用方法
2021/01/31 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
趣天网日本站：Qoo10 JP
2019/09/18 全球购物
应聘自荐书
2013/10/08 职场文书
法律专业应届本科毕业生求职信
2013/10/25 职场文书
服务生自我鉴定
2014/01/22 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书