Common left-side navigation effects implemented by js _ javascript tips-js tutorial

Simple implementation of commonly used left-side navigation effects using js is born to improve navigation performance. You can refer to the application and hope to help you with the commonly used left-side navigation effects. JS is simple, to improve navigation performance, you can refer to the application.

Effect display:

HTML:

The Code is as follows:

• 
  

  Apparel bags

  
  

  
  Women's clothing and children's clothing bags
  
  Shoes and accessories
  

  
  


• 
  

  Liquor and beverage

  
  

  
  Women's clothing and children's clothing bags
  
  Shoes and accessories
  

  
  


• 
  

  Home Building Materials

  
  

  
  Women's clothing and children's clothing bags
  
  Shoes and accessories
  

  
  


• 
  

  Catering and entertainment

  
  

  
  Women's clothing and children's clothing bags
  
  Shoes and accessories
  

  
  


• 
  

  Beauty Care

  
  

  
  Women's clothing and children's clothing bags
  
  Shoes and accessories
  

  
  


• 
  

  Education and training

  
  

  
  Women's clothing and children's clothing bags
  

  
  


• 
  

  Industrial Products

  
  

  
  Women's clothing and children's clothing bags
  

  
  


• 
  

  Novelty

  
  

  
  Women's clothing and children's clothing bags
  
  Shoes and accessories
  

  
  

Project video

• 
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  


• 
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  

2

3

4

5

6

7

8

JS:

The Code is as follows:

$ (". Menu_list li"). mouseenter (function (){
$ (". Menu_box"). show ();
Var nav_index = $ (". menu_list li"). index (this );
$ (". Menu_cont"). eq (nav_index). show () // the current content of the sliding menu.
. Siblings (). hide ();
});
$ (". Menu"). mouseleave (function (){

$ (". Menu_box"). hide ();
});