DIV menu layer implementation code _ javascript tips-js tutorial

Yesterday I asked about jQuery, which is simple and complicated. I asked to what extent is the complexity? He cut a picture for me: The classification menu of QQ mall, the effect is as follows:

I looked at it, sorry! This is also the case in our blog Park! I have never done this before, just try it myself! (I am not an artist, but I have a little understanding of js !)
I. Analysis:
1. The big classification on the right must be represented by pMenuContent under a layer.
2. The mouse on the left should also be a layer, which is represented by pMenuItem below.
Q: How is it like? The left and right seem to be integrated! So I thought that the right side of pMenuItem is none, and the Z axis is higher than pMenuContent, so that it is placed on the border of pMenuContent!
The following is the style of two layers:

The Code is as follows:

# PMenuItem
{
Position: absolute;
Z-index: 99;
Width: 147px;
Height: 25px;
Border: 3px solid #963;
Border-right: 0px;
Background-color: # FC9;
Display: none;
}
# PMenuContent
{
Display: none;
Position: absolute;
Z-index: 98;
Width: 200px;
Height: 505px;
Border: 3px solid #963;
Background-color: # FC9;
}

Then layout a page for testing:

The Code is as follows:

• Aaaaaaaaaaaaa


• Bbbbbbbbbbbbbbb


• Cccccccdccccc


• Ddddddddddddd


• Eeeeeeeeeeeee


• Fffffffffff


• Ggggggggggggg


• Hhhhhhhhhhhhh

Set the menu style:

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:

The Code is as follows:

$ ("# Menu li"). mouseenter (function ()
{
Var offset = $ (this). offset ();
$ ("# PMenuItem ")
. Offset ({
Top: offset. top, left: offset. left
})
.Html(((this).html ())
. Show ()
$ ("# PMenuContent ")
. Offset ({
Top: offset. top, left: offset. left + $ (this). width ()-1
})
. Show ()
})

The problem is located here! The logic is correct. It can be found that, except for one move, the first one will be a bit misplaced in the future! I have never figured out what is going on here! Later, after show (), offset () again. I hope the high person can specify it.
The modified JavaScript code is as follows:

The Code is as follows:

$ (Function (){
$ ("# PMenuItem, # pMenuContent"). mouseout (function (e)
{
If ($ (e. toElement). parent (). attr ("id ")! = "Menu" & $ (e. toElement). attr ("id ")! = "PMenuContent ")
{
$ ("# PMenuItem"). hide ();
$ ("# PMenuContent"). hide ();
}
})
$ ("# Menu li"). mouseenter (function ()
{
Var offset = $ (this). offset ();
$ ("# PMenuItem ")
. Offset ({
Top: offset. top, left: offset. left
})
.Html(((this).html ())
. Show ()
. Offset ({
Top: offset. top, left: offset. left
});
$ ("# PMenuContent ")
. 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 in it, and the offset () is two effects:

Replace the comments with the following:

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