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 相关文章推荐
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
微信小程序实现图片压缩功能
Jan 26 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
vue路由教程之静态路由
Sep 03 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
Vue实现可移动水平时间轴
Jun 29 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JQuery中$之选择器用法介绍
2011/04/05 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
用vue写一个日历
2020/11/02 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python生成器与迭代器详解
2019/01/01 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
小学教师个人先进事迹材料
2014/05/17 职场文书
如何写好开幕词?
2019/06/24 职场文书
Django如何与Ajax交互
2021/04/29 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python