jQuery和CSS仿京东仿淘宝列表导航菜单


Posted in Javascript onJanuary 04, 2017

以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单。今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样。

功能介绍:

1、鼠标停留导航;

2、根据子列表的高度,自动调整对齐方式(顶端对齐/父类目对齐);

3、父子类目样式一致。

功能截图:

jQuery和CSS仿京东仿淘宝列表导航菜单

源代码:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta name="keywords" content=" keywords" />
 <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
 body{font-size:12px}
 ul,li{list-style-type:none;padding:0px}
 .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2}
 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc;z-index:100;position:relative}
 .content{padding-top:10px;clear:left}
 a{text-decoration:none;color:#666;padding:10px}
 .optnFocus{background-color:#fff;font-weight:bold}
 div{padding:10px}
 div img{float:left;padding-right:6px}
 span{padding-top:3px;font-size:14px;font-weight:bold;float:left}
 .tip{width:190px;position:absolute;padding:10px;display:none;}
 .tip li{line-height:23px}
 .focus{border:solid 1px red;background-color:#ccc}
 
</style>
<body>
<script type="text/javascript">
 $(function(){
 $('.optn').bind({mouseover:function(){
  var liTop = 12;
  var liLeft = $(this).offset().left+$(this).width();
  if(($(this).offset().top)>($(this).next('ul').height())){
  liTop = $(this).offset().top;
  }
  $(this).css('border-right','0');
  $(this).next('.tip').show().css({'left':liLeft+'px',top:liTop+'px'});
  $(this).addClass('focus');
  $(this).next('.tip').addClass('focus');
 },mouseout:function(){
  $(this).next('.tip').hide();
  $(this).removeClass('focus');
 }});
 });

</script>

<ul>
 <li class="menu">
 <div>
  <span>电脑数码产品</span>
 </div>
 <ul class="content">
  <li class="optn"><a href="#">笔记本</a></li>
  <ul class="tip">
  <li><a href="#">笔记本1</a></li>
  <li><a href="#">笔记本1</a></li>
  <li><a href="#">笔记本1</a></li>
  <li><a href="#">笔记本1</a></li>
  <li><a href="#">笔记本1</a></li>
  </ul><li class="optn"><a href="#">移动硬盘</a></li>
  <ul class="tip">
  <li><a href="#">移动硬盘1</a></li>
  <li><a href="#">移动硬盘1</a></li>
  <li><a href="#">移动硬盘1</a></li>
  <li><a href="#">移动硬盘1</a></li>
  <li><a href="#">移动硬盘1</a></li>
  </ul><li class="optn"><a href="#">电脑软件</a></li>
  <ul class="tip">
  <li><a href="#">电脑软件1</a></li>
  <li><a href="#">电脑软件1</a></li>
  <li><a href="#">电脑软件1</a></li>
  <li><a href="#">电脑软件1</a></li>
  <li><a href="#">电脑软件1</a></li>
  </ul><li class="optn"><a href="#">数码产品</a></li>
  <ul class="tip">
  <li><a href="#">数码产品1</a></li>
  <li><a href="#">数码产品1</a></li>
  <li><a href="#">数码产品1</a></li>
  <li><a href="#">数码产品1</a></li>
  <li><a href="#">数码产品1</a></li>
  </ul>
 </ul>
 </li>
</ul>
<span></span>
</body>
</html>

遇到的问题及解决办法:

1、鼠标指针位置获取:

a、function(e){alert(e.pageX);

alert(e.pageY);}//获取鼠标当前位置

b、获取元素的位置:   $(this).offset().top

$(this).offset().left//获取元素的位置

注:以上两种方法均在jQuery中适用,若使用JS中,需做适当改动

2、两个区块叠加时,边框处理问题:

需要的效果是:

jQuery和CSS仿京东仿淘宝列表导航菜单

但是现实的效果却是:

jQuery和CSS仿京东仿淘宝列表导航菜单

这个问题困扰了我半天,也在一个群里求救,一个好心的兄弟给我一段JS代码,结果我还是没用上,最后看了一个选项卡的实例,终于把这个问题搞定了。解决办法是:

人为加宽父菜单的宽度,然后把右边框设置成0,最后记得把父标签的放在最顶端显示

父菜单:

border-right:0;

z-index:100;

position:relative;

宽度覆盖子菜单

子菜单:

和父菜单背景色一样

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js左侧三级菜单导航实例代码
Sep 13 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
基于vue.js实现的分页
Mar 13 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
axios封装与传参示例详解
Oct 18 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 #Javascript
jQuery实现联动下拉列表查询框
Jan 04 #Javascript
JavaScript中String对象的方法介绍
Jan 04 #Javascript
js select下拉联动 更具级联性!
Apr 17 #Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 #Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 #Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 #Javascript
You might like
php过滤危险html代码
2008/08/18 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
python中requests使用代理proxies方法介绍
2017/10/25 Python
python requests.post带head和body的实例
2019/01/02 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python2与Python3的区别详解
2020/02/09 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
工作决心书范文
2014/03/11 职场文书
移风易俗倡议书
2014/04/15 职场文书
大跃进口号
2014/06/16 职场文书
慰问信格式规范
2015/03/23 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis