DIV menu layer implementation code_javascript skills

He took a screenshot for me, which is the category menu of QQ Mall. The effect is as follows:

I took a look, eh! Our blog park is also like this! I have never done this effect myself before, so I just wanted to try it myself! (I'm not an artist, but I know a little bit about js!)
1. Analysis:
1. The big category on the right must be represented by divMenuContent under a layer
2. The one on the left that the mouse moves up should be It is also a layer, below it is represented by divMenuItem
Question: How to express it as shown in the picture? The left and right sides look like one piece! So I thought that the right side of divMenuItem is none, and the z-axis is higher than divMenuContent, so that it just presses on the border of divMenuContent!
The following are the styles of the two layers:

Copy the code The code is as follows:

# 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;
}

Then layout a page for testing:

Copy the code The code is as follows:

< ;body>

• aaaaaaaaaaaaa


• bbbbbbbbbbbbb


• cccccccdccccc
🎜>< ;li>eeeeeeeeeeeeee

• fffffffffffff
>







Simply set the style of the menu:

Copy the code

The code is as follows: 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;
}


Main implementation:

Copy code

The code is as follows : $("#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()
})


The main issue here is positioning! It is logically correct, but you can find that except for the normal display when moved up once, the first one moved up every time is slightly misaligned! I still haven’t figured out what’s going on here! Later, just offset() after show() and it was fine. I hope someone can point it out.
The modified JS is as follows:

Copy code

The code is as follows: $( 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
});
})
})

There is a comment inside, the offset() piece, it and the offset() below are two effects, the current rendering:

Change the comment section to the rendering:

The effect has been tested in: IE6, 7, 8, and chrome!
Code package download/201011/yuanma/menu_jquery1.rar