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 相关文章推荐
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
js中作用域的实例解析
Mar 16 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
原生js实现日期选择插件
May 21 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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
第四节--构造函数和析构函数
2006/11/16 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
url decode problem 解决方法
2011/12/26 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python封装shell命令实例分析
2015/05/05 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python实现图片彩色转化为素描
2019/01/15 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
详解Django配置优化方法
2019/11/18 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
篮球兴趣小组活动总结
2014/07/07 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
三年级学生评语大全
2014/12/26 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js