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 指导方针
Apr 05 Javascript
js函数般调用正则
Apr 08 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
vue下载二进制流图片操作
Oct 26 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
php修改NetBeans默认字体的大小
2013/07/02 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS