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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
node.js实现带进度条的多文件上传
Mar 27 Javascript
Openlayers实现地图的基本操作
Sep 28 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
详解React 元素渲染
2020/07/07 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python实现八大排序算法(2)
2017/09/14 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
毕业证丢失证明
2014/01/15 职场文书
道路建设实施方案
2014/03/18 职场文书
研发工程师岗位职责
2014/04/28 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
道歉的话怎么说
2015/05/12 职场文书
英文辞职信范文
2015/05/13 职场文书
反邪教教育心得体会
2016/01/15 职场文书