jquery imitate Jingdong/cat merchandise left category navigation menu effect _jquery

Now the cat or the Jingdong product Classification module's default effect is this:

When the mouse is over any of the column navigation categories, the relevant detailed classification module appears, for example:

When the mouse moves outside the blue box, the default effect is restored! However, the use of jquery mouse over the event, more use is mouseover () and mouseout (), or their two integration hover (); So I used this method, but the adjustment has not been adjusted to the desired effect! Then a flash of light, thinking about the use of MouseEnter () and MouseLeave (); The results of the minute want the effect is out!

My layout is roughly like this:

<div class= "Nav_left" > <div class= "nav_top" ></div> <div class= "Nav_tilte" > All product Categories </div > <div class= "dd" > <div class= "nav_list" > <div class= "nav_list_s" > <span class= "Nav_span" >& Lt;a href= "#" > Mobile, </a><a href= "#" > Digital, </a><a href= "#" > Jingdong Communications </a></span> <i class= "Nav_arrow" >></i> </div> <div class= "nav_list_s" > <span class= "Nav_span" ><a href= "#" > Mobile phone, </a><a href= "#" > Digital, </a><a href= "#" > Jingdong communications </a></span> <i class= "Nav_arrow" >></i> </div> <div class= "nav_list_s" > <span class= "nav_span" ><a href= "# "> Mobile phone, </a><a href=" # "> Digital, </a><a href=" # "> Jingdong communications </a></span> <i class=" nav_
Arrow ">></i> </div> </div> <div class=" Nav_detailbox "> <div class=" Nav_detail "> <a href= "#" >111 Detailed submenu, here is not written </a> </div> <div class= "Nav_detaiL "> <a href=" # ">22222 Detailed submenu, here is not written </a> </div> <div class=" Nav_detail "> <a href=" # "> 3333 Detailed submenu, here is not written </a> </div> </div> </div> </div>

In the Nav_left box has 3 big content, respectively is like the picture 1,2,3, they belong to the nav_left inside, because all belong to the classification commodity content, 1 and 2 are equivalent to decorate the display the function, the layout row is OK

So the emphasis is on the 3rd module, the third module of the big box here named DD

Inside the DD box (that is, the 3rd module), there is a large box (Nav_list) 3.1 with the left red background, and a white background box (NAV_) that appears after the right mouse has slipped. Detailbox) 3.2, often write this layout must know is to use positioning layout to achieve, so here is also used to achieve the layout of positioning.

Layout to be related to our style, such as our default style is the mouse does not slip is the default effect, the mouse over the display of the special effects, then write a separate style, through the jquery event to add it!

For example, I have a special class nav_list_s01 here, and after adding this class, the mouse over the background is white.

When the layout and style are fully prepared, we can use jquery to achieve the desired effect:

$ (". nav_list_s"). MouseEnter (function () {
$ (this). addclass ("Nav_list_s01"). Siblings (). Removeclass ("Nav_list_ S01 ");
$ (". Nav_detailbox"). Show ();
$ (". Nav_detailbox"). Children (". Nav_detail"). EQ ($ (a). Index ()). Show (). siblings (). Hide ();
})
$ (". Nav_left"). MouseLeave (function () {
$ (this). Find (". nav_list_s"). Removeclass ("nav_list_s01");
$ (". Nav_detailbox"). Stop (). Hide ();
})

As you can see from the general layout given before, nav_list_s are the boxes

Nav_detailbox is the mouse over the left side of the nav_list_s to show the big box, Nav_detail is the contents of this big box.

The above is a small series to introduce the jquery to imitate Jingdong/cat merchandise left category navigation menu effect, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. I also thank you for your support for the cloud-dwelling community website.