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 divMenuContent under a layer.
2. The layer that the left mouse moves should also be a layer, which is represented by divMenuItem below.
Q: How is it like? The left and right seem to be integrated! The right side of divMenuItem is none, and the Z axis is higher than divMenuContent, so that it is placed on the divMenuContent border!
The following is the style of two layers:
Copy codeThe 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 codeThe Code is as follows:
<Body>
<Br/>
<Br/>
<Br/>
<Ul class = "menu" id = "menu">
<Li> aaaaaaaaaaaaa </li>
<Li> bbbbbbbbbbbbbbb </li>
<Li> cccccccdccccc </li>
<Li> ddddddddddd </li>
<Li> eeeeeeeeeeeee </li>
<Li> fffffffffff </li>
<Li> ggggggggggggg </li>
<Li> hhhhhhhhhhhhh </li>
</Ul>
<Div id = "divMenuItem"> </div>
<Div id = "divMenuContent"> </div>
</Body>
Set the menu style:
Copy codeThe 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 codeThe 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 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:
Copy codeThe 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 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