Implementation of multi-level drop-down menu effects with arrows in JavaScript _ javascript skills

This article mainly introduces how to implement the multi-level drop-down menu with arrows in JavaScript, and how to identify the position of selected menu items in the form of horizontal and vertical arrows, this section describes how to use javascript to determine the location of page elements and how to operate styles dynamically. For more information, see the following example. Share it with you for your reference. The details are as follows:

This is a JS menu that supports multi-level display. Move the mouse to a menu item with a small triangle to pull down the level-2 sub-menu item. A tag is displayed above the main menu to guide the current position, this menu Code uses a JS class and can be downloaded by yourself based on the Code address. This menu is not tested online and may need to be modified on its own website.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-focus-m-select-menu-nav-codes/

The Code is as follows:

Multi-level expanded horizontal menu
 
 
 
 
 
 

 
 

  
  
Who We Are
 
   
 
    
Overview
 
    
Mission & Goals
 
    
History
 
    
Management
 
    
Working at Tyco
 
    
Press Center
 
    
Worldwide
 
     
 
      
Europe
 
      
Asia
 
      
US & Canada
 
      
Mexico
 
      
Australia
 
      
Middle East
 
     
 
    
Board of Directors
 
     
 
      
Overview
 
      
Electronics
 
      
Fire & Security
 
      
Healthcare
 
      
Plastics & Adhesives
 
      
Engineered Producs
 
      
Tyco Worldwide
 
     
 
    
MERs
 
   

  
  
Our Commitment
 
   
 
    
Overview
 
    
People & Values
 
    
Governance
 
    
Community
 
    
Environmental
 
   

  
  
Our Business
 
   
 
    
Overview
 
    
Electronics
 
    
Fire & Security
 
    
Healthcare
 
    
Plastics & Adhesives
 
    
Engineered Producs
 
    
Tyco Worldwide
 
   

  
  
Investors
 
   
 
    
Overview
 
    
Stock Quotes