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

2019-11-21 00:07:17

字體：大中小

供稿：網(wǎng)友

他便給我截了個(gè)圖是，QQ商城的分類(lèi)菜單，效果如下:

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

復(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; 
} 

然后布局一個(gè)頁(yè)面測(cè)試用：

復(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> 

簡(jiǎn)單設(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; 
} 

主要實(shí)現(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() 
}) 

這里主要就是定位問(wèn)題了！邏輯上是對(duì)的，可發(fā)現(xiàn)除一次移上去顯示正常外，以后每移上的第一個(gè)都有點(diǎn)錯(cuò)位！這里也是一直沒(méi)搞明白是怎么回事！后來(lái)在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 
}); 
}) 
}) 