Baidu news navigation menu sliding Animation Based on jquery _ jquery

This article mainly introduces how to implement Baidu news navigation menu slide Animation Based on jquery. If you are interested, refer to the examples in this article to share with you how jquery implements Baidu news navigation menu slide animation, for your reference, the specific content is as follows:

Ideas and steps
1. Use UL to create simple horizontal navigation;

  Imitation Baidu news menu sliding Animation    
    
      
 
 
        
  
  
Homepage
        
  
  
Hotspot
        
  
  
International News
        
  
  
Domestic News
        
  
  
National policy
        
  
  
Sports News
        
  
  
Entertainment News
        
  
  
Celebrity
        
  
  
Monuments
      
 
 
    
  

2. Add an escape layer p named p-hover for menu slide animation and set the CSS style;

   
     
   
   
 
 

  
  
...
 
 

3. Add the sliding event of the menu item and calculate the sliding elements, left, top margin, and width of p-hover;