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 相关文章推荐
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
微信小程序实现单选功能
Oct 30 Javascript
微信小程序实现留言板
Oct 31 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 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中函数前加&amp;符号的作用分解
2014/07/08 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
WAF的正确bypass
2017/01/05 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python占位符输入方式实例
2019/05/27 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python configparser模块常用方法解析
2020/05/22 Python
利用python爬取有道词典的方法
2020/12/08 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
大学教师年终总结的自我评价
2013/10/29 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
工会工作先进事迹
2014/08/18 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
Python爬取某拍短视频
2021/06/11 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js