jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果


Posted in Javascript onApril 24, 2013

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码
先看下jquery仿京东导航效果:
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

前端html代码如下:

<ul> 
<li><a href="#">baidu</a></li> 
<div class="tips"> 
<p><a href="http://www.baidu.com">baidu</a></p> 
</div> 
<li>goolge</li> 
<div class="tips"> 
<p><a href="http://www.google.com">google</a></p> 
</div> 
<li>yahoo</li> 
<div class="tips"> 
<p><a href="http://www.yahoo.com">yahoo</a></p> 
</div> 
<li>microsoft</li> 
<div class="tips"> 
<p><a href="http://www.microsoft.com">microsoft</a></p> 
</div> 
</ul> <style type="text/css"> 
html{color:#666;background:#FFF;} 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 
body{font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;} 
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} 
table{border-collapse:collapse;border-spacing:0;} 
img{border:none;} 
a{text-decoration:none; color:#666;} 
a:hover{text-decoration:underline; color:#FF6600;} 
ul,li{list-style-type:none;} 
q:before,q:after{content:'';} 
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;} 
/* All reset */ 
body{ margin:100px;} 
ul li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background:#FFFDD2; position:relative; z-index:1;} 
.tips{position:absolute; width:150px; height:150px; border:1px solid #E5D1A1; background:#fff; z-index:2; display:none;} 
</style>

js代码:
<script type="text/javascript"> 
$(function(){ 
$("ul li").each(function(index){ 
$(this).mouseover(function(){ 
var obj=$(this).offset(); 
var xobj=obj.left+190+"px"; 
var yobj=obj.top-50+"px"; 
$(this).css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"}); 
$("ul > div:eq("+index+")").css({"left":xobj,"top":yobj}).show(); 
}).mouseout(function(){ 
$("ul > .tips").hide(); 
$(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"}) 
}) }) 
$("div").each(function(){ 
$(this).mouseover(function(){ 
$(this).prev("li").css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"}) 
$(this).show(); 
}).mouseout(function(){ 
$(this).hide(); 
$(this).prev("li").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"}); 
}) 
}) 
}) 
</script>

效果图如下,
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

jQuery仿京东左侧菜单效果,适合商城产品导航,这里没有做的那么细,只是使用CSS结合jQuery完成了菜单的简单效果,如果需要美化,请您在实际应用中自己搞一下吧,兼容性非常不错的,欢迎大家使用。

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 #Javascript
查看图片(前进后退)功能实现js代码
Apr 24 #Javascript
jQuery判断密码强度实现思路及代码
Apr 24 #Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 #Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 #Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 #Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 #Javascript
You might like
hadoop常见错误以及处理方法详解
2013/06/19 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
python实现合并两个数组的方法
2015/05/16 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python 列表推导式使用详解
2019/08/29 Python
python创建学生成绩管理系统
2019/11/22 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python执行时间的几种计算方法
2020/07/31 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
一句话工作感言
2014/03/01 职场文书
人事科岗位职责范本
2014/03/02 职场文书
文明生主要事迹
2014/05/25 职场文书
环保宣传标语
2014/06/12 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014年医生工作总结
2014/11/21 职场文书
初中优秀学生评语
2014/12/29 职场文书
2016十一国庆节感言
2015/12/09 职场文书