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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
js 概率计算(简单版)
Sep 12 Javascript
javascript验证form表单数据的案例详解
Mar 25 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
php5 and xml示例
2006/11/22 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
Python中文件操作简明介绍
2015/04/13 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python实现扫雷小游戏
2020/04/24 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
手机促销活动方案
2014/02/05 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
会计专业自荐信
2014/06/03 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python中的pprint模块
2021/11/27 Python