[Original] Div menu Layer

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 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:

 

CSS

# 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:

 

Code

< Body >
< BR />
< BR />
< BR />
< Ul Class = "Menu" ID = "Menu" >
< Li > Aaaaaaaaaaaaa </ Li >
< Li > Bbbbbbbbbbbbbbb </ Li >
< Li > Cccccccdccccc </ Li >
< Li > Ddddddddddddd </ 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:

 

Code

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:

 

Code

$ ( " # Menu Li " ). Mouseenter ( Function ()
{
VaR Offset = $ ( This ). Offset ();
$ ( " # Divmenuitem " )
. Offset ({
Top: Offset. Top, left: Offset. Left
})
. Html ($ ( This Pai.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:

 

Code

$ ( 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 Pai.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!

 

Download