首页
所有分类
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 Event学习第七章 事件属性
Feb 07 Javascript
web前端开发也需要日志
Dec 09 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
Angularjs实现数组随机排序的方法
Oct 02 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
kafka(2) 有序排列(1) 曝光融合(1) 连接器(1) shell脚本(1) key(1) 公共键(1) pycryto(1) HDR(1) 数据加密(1)
You might like
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
详解js中构造流程图的核心技术JsPlumb（2）
2015/12/08 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
微信小程序生成分享海报方法（附带二维码生成）
2019/03/29 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
Python 字符串定义
2009/09/25 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python实现机器人卡牌
2019/10/06 Python
python中有帮助函数吗
2020/06/19 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
NFL墨西哥官方商店：Tienda NFL
2017/11/28 全球购物
大学生入党思想汇报
2014/01/14 职场文书
群众路线表态发言材料
2014/10/17 职场文书
小学数学教师研修日志
2015/11/13 职场文书
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
Go语言 详解net的tcp服务
2022/04/14 Golang