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

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

前端超文本标记语言代码如下：复制代码代码如下： ul lia href=' # ' Baidu/a/Li div=' tips ' pa href=' http://www .百度。com ' Baidu/a/p/div ligool ge/Li div class=' tips ' pa href=' http://www .谷歌。Google/a/p/div liya ho/Li div=' tips ' pa href=' http://www .雅虎。com ' Yahoo/a/p/div lim Microsoft/Li div class=' tips '背景： # 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划水：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}表格{边框-塌陷：塌陷；边框间距：0;} img { border : none } a { text-decoration : none；color: # 666} a :悬停{ text-decoration :下划线；color: # FF6600} ul，Li { list-style-type : none；} q :之前，q :之后{内容： }；} sup {竖排：文本-顶部；} sub {垂直对齐：文本-底部；} /*全部复位*/正文{ margin:100px} ul Li {行高：30 pxborder:1px实心# E5D1A1文本对齐：居中；页边距-顶部：-1px；宽度宽度：200像素背景# FFFDD2位置：相对；z索引：1;} .提示{位置：绝对宽度宽度：150像素高度：150 pxborder:1px实心# E5D1A1背景# fffz索引：2;display:none} /style js代码：复制代码代码如下：脚本类型=' text/JavaScript ' $(function(){ $(' ul Li ')).每个（函数（索引){ $(这个)).将鼠标悬停在(function(){ var obj=$(this))上.offset()；var xobj=obj . left 190 ' pxvar yobj=obj。top-50 ' px '；$(这个)。css({'width':'190px '，' z-index':'9999 '，' border-right':'none '，' background ' : ' # fff ' })；$(“ul div : eq(索引)”).CSS({ ' left ' : obj，' top':yobj}).show()；}).mouseout(function(){ $('ul .tips’).hide()；$(这个)。css({'width':'200px '，' z-index':'1 '，' border':'1px实线#E5D1A1 '，' background ' : ' # fffdd 2 ' })}))$(' div ').每个（函数(){ $(此)).mouseover(函数(){ $(this)).上一个(' li ').css({'width':'190px '，' z-index':'9999 '，' border-right':'none '，' background':'#fff'}) $(this).show()；}).mouseout(函数(){ $(此)).hide()；$(这个)。上一个(' li ').css({'width':'200px '，' z-index':'1 '，' border':'1px实线#E5D1A1 '、背景' : ' # fffdd 2 ' })；})})})/脚本效果图如下

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