快捷導(dǎo)航

jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果

更新時(shí)間：2013年04月24日 16:19:38 作者：

jquery實(shí)現(xiàn)下拉菜單效果，jquery寫的仿京東導(dǎo)航菜單，一個(gè)經(jīng)典的左側(cè)多級(jí)導(dǎo)航菜單，學(xué)會(huì)了可以任意改變布局，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助

在網(wǎng)站建設(shè)中，特別是做商城和產(chǎn)品網(wǎng)站，通常會(huì)用到導(dǎo)航彈出菜單，像是jquery寫的仿京東導(dǎo)航菜單，一個(gè)經(jīng)典的左側(cè)多級(jí)導(dǎo)航菜單，學(xué)會(huì)了可以任意改變布局。京東菜單已經(jīng)有不少JS前端愛(ài)好者仿寫過(guò)，今天螞蟻網(wǎng)絡(luò)重新與大家分享一款仿京東商城的商品多級(jí)分類菜單，精簡(jiǎn)版代碼
先看下jquery仿京東導(dǎo)航效果：

前端html代碼如下：

復(fù)制代碼代碼如下:

 
<ul> 
<li><a href="#">baidu</a></li> 
<div class="tips"> 
<p><a >baidu</a></p> 
</div> 
<li>goolge</li> 
<div class="tips"> 
<p><a >google</a></p> 
</div> 
<li>yahoo</li> 
<div class="tips"> 
<p><a >yahoo</a></p> 
</div> 
<li>microsoft</li> 
<div class="tips"> 
<p><a >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代碼：

復(fù)制代碼代碼如下:

 
<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仿京東左側(cè)菜單效果，適合商城產(chǎn)品導(dǎo)航，這里沒(méi)有做的那么細(xì)，只是使用CSS結(jié)合jQuery完成了菜單的簡(jiǎn)單效果，如果需要美化，請(qǐng)您在實(shí)際應(yīng)用中自己搞一下吧，兼容性非常不錯(cuò)的，歡迎大家使用。

您可能感興趣的文章: