jQuery简单实现仿京东商城的左侧菜单效果代码

本文实例讲述了jQuery简单实现仿京东商城的左侧菜单效果代码。分享给大家供大家参考。具体如下：

这是一款挺漂亮的左侧菜单效果，基于jQuery插件，但是还没有真正的完善，有些闪动，也希望高人指点修正。仿京东商城风格的菜单。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-f-JD-shop-left-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title左侧菜单效果/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script script $().ready(function(){$(')).测试盒ul Li’.悬停(function(){$(this)).查找('。盒子展示').show()；}，function(){$(this).查找('。盒子展示').hide()；});});/scriptstyle type='text/css '！-* { padd :0；列表式：无；边距：0 }正文{背景： # 666；}.测试盒{ margin-top : 10px；左边距left: 10px宽度： 200像素；}.阿利测试盒{ color : # FFF；font-size : 12px文本装饰：无；背景色： # 333;padding: 8pxmargin: 4px向左浮动：border: 1px固体# FFF；相对位置：宽度： 100像素；}.测试盒ul阿利：悬停{ color : # 000font-size : 12px文本装饰：无；背景-颜色： # CCCpadding: 8px向左浮动：相对位置：边框-顶部-宽度： 1px边框-底部-宽度： 1px边框-左侧-宽度： 1px边框-顶部-样式：实心；边框-底部-样式：实心；边框-左侧-style:实心；边框-顶部-颜色： # FFF；边框-底部-颜色： # FFF；边框-左侧-彩色： # FFF；边框-右侧-宽度： 1px边框-右侧-style:实心；边框-右侧-颜色： # CCCz-index : 2；宽度： 87px}.测试箱ul li .框显示{底色： # CCC高度： 330像素宽度： 300像素；绝对位置：left: 118pxborder: 1px固体# FFF；font-size : 12pxcolor : # 000 padd : 10 xtop : 14 pxdisplay :无；z-index : 1；}-/style/head dydiv class=' testbox ' ul lia href=' # '测试分类标题1/a div class='boxshow '分类标题一的内容/div /li lia href='# '测试分类标题2/a div class='boxshow '分类标题2的内容/div /li lia href='# '测试分类标题3/a div class='boxshow '分类标题3的内容/div /li lia href='# '测试分类标题4/a div class='boxshow '分类标题四的内容/div /li lia href='# '测试分类标题5/a div class='boxshow '分类标题5的内容/div /li lia href='# '测试分类标题6/a div class='boxshow '分类标题6的内容/div /li lia href='# '测试分类标题7/a div class='boxshow '分类标题七的内容/div /li lia href='# '测试分类标题8/a div class='boxshow '分类标题8的内容/div /li lia href='# '测试分类标题9/a div class='boxshow '分类标题9的内容/div /li /ul/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。