他便給我截了個圖是，QQ商城的分類菜單，效果如下:
我看了一下，咦！咱們這博客園也是這種呀！我自己之前也沒做過這種效果，正好自己試試！（我不是做美工的，不過到js略懂罷了！）
一、分析：
1，右邊大分類肯定是一個層下面用divMenuContent表示
2，左邊鼠標移上去的那個應該也是個層，下面用divMenuItem表示
問題：怎么樣表現(xiàn)過如圖的樣子呢？左邊和右邊看起來是一體的！于是想到divMenuItem的右邊為none,而且z軸高于divMenuContent，讓它正好壓在divMenuContent的邊框上！
下面是兩個層的樣式：
代碼如下:
#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;
}
然后布局一個頁面測試用：
代碼如下:
aaaaaaaaaaaaa bbbbbbbbbbbbb cccccccdccccc ddddddddddddd eeeeeeeeeeeee fffffffffffff ggggggggggggg hhhhhhhhhhhhh 簡單設置一下menu的樣式：
代碼如下:
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)：
代碼如下:
$("#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如下：
代碼如下:
$(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
});
})
})
里面有一塊注釋，offset()那塊，它和下面的offset()是兩個效果，現(xiàn)在的效果圖：
注釋部分換一下效果圖：
效果已在：IE6,7,8，chrome中測試通過！
代碼打包下載/201011/yuanma/menu_jquery1.rar
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
