快捷導(dǎo)航

DIV菜單層實現(xiàn)代碼

更新時間：2010年11月19日 18:35:29 作者：

昨天我問一美工jQuery怎么樣了，他說簡單的還可以，復(fù)雜的就不行了，我又問是哪種程度的復(fù)雜？

他便給我截了個圖是，QQ商城的分類菜單，效果如下:

我看了一下，咦！咱們這博客園也是這種呀！我自己之前也沒做過這種效果，正好自己試試?。ㄎ也皇亲雒拦さ?，不過到j(luò)s略懂罷了?。?
一、分析：
1，右邊大分類肯定是一個層下面用divMenuContent表示
2，左邊鼠標(biāo)移上去的那個應(yīng)該也是個層，下面用divMenuItem表示
問題：怎么樣表現(xiàn)過如圖的樣子呢？左邊和右邊看起來是一體的！于是想到divMenuItem的右邊為none,而且z軸高于divMenuContent，讓它正好壓在divMenuContent的邊框上！
下面是兩個層的樣式：

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

 
#divMenuItem 
{ 
position:absolute; 
z-index:99; 
width:147px; 
height:25px; 
border:3px solid #963; 
border-right:0px; 
background-color:#FC9; 
display:none; 
} 
#divMenuContent 
{ 
display:none; 
position:absolute; 
z-index:98; 
width:200px; 
height:505px; 
border:3px solid #963; 
background-color:#FC9; 
} 

然后布局一個頁面測試用：

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

 
<body> 
<br /> 
<br /> 
<br /> 
<ul class="menu" id="menu"> 
<li>aaaaaaaaaaaaa</li> 
<li>bbbbbbbbbbbbb</li> 
<li>cccccccdccccc</li> 
<li>ddddddddddddd</li> 
<li>eeeeeeeeeeeee</li> 
<li>fffffffffffff</li> 
<li>ggggggggggggg</li> 
<li>hhhhhhhhhhhhh</li> 
</ul> 
<div id="divMenuItem"></div> 
<div id="divMenuContent"></div> 
</body> 

簡單設(shè)置一下menu的樣式：

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

 
body 
{ 
margin:0px; 
padding:0px; 
} 
.menu 
{ 
list-style-type:none; 
float:left; 
border:1px solid green; 
width:150px; 
} 
.menu li 
{ 
height:25px; 
background-color:#CCC; 
border:1px solid red; 
} 

主要實現(xiàn)：

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

 
$("#menu li").mouseenter(function() 
{ 
var offset=$(this).offset(); 
$("#divMenuItem") 
.offset({ 
top:offset.top,left:offset.left 
}) 
.html($(this).html()) 
.show() 
$("#divMenuContent") 
.offset({ 
top:offset.top,left:offset.left+$(this).width()-1 
}) 
.show() 
}) 

這里主要就是定位問題了！邏輯上是對的，可發(fā)現(xiàn)除一次移上去顯示正常外，以后每移上的第一個都有點錯位！這里也是一直沒搞明白是怎么回事！后來在show()后又offset()了一下就好了，希望高人指明。
修改后的全部JS如下：

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

 
$(function(){ 
$("#divMenuItem,#divMenuContent").mouseout(function(e) 
{ 
if($(e.toElement).parent().attr("id")!="menu" && $(e.toElement).attr("id")!="divMenuContent") 
{ 
$("#divMenuItem").hide(); 
$("#divMenuContent").hide(); 
} 
}) 
$("#menu li").mouseenter(function() 
{ 
var offset=$(this).offset(); 
$("#divMenuItem") 
.offset({ 
top:offset.top,left:offset.left 
}) 
.html($(this).html()) 
.show() 
.offset({ 
top:offset.top,left:offset.left 
}); 
$("#divMenuContent") 
.offset({ 
top:offset.top,left:offset.left+$(this).width()-1 
}) 
.show() 
/* .offset({ 
top:offset.top,left:offset.left+$(this).width()-1 
});*/ 
.offset({ 
top:$("#menu li").first().offset().top,left:offset.left+$(this).width()-1 
}); 
}) 
}) 