Bootstrap~The implementation effect of multi-level navigation (cascading navigation) [with code]_javascript skills

According to Bootstrap officials, navigation can only have two levels at most, and it is impossible to achieve more than two levels. The uncle looked for some third-party information and finally found a good plug-in, which is both good in use and effect. Now and Share it with everyone

Plug-in address: http://vsn4ik.github.io/bootstrap-submenu/

Let’s take a look at the display effect on Uncle’s background system

Let’s talk about how to implement it

1 Reference to three JS plug-ins and a CSS class library

Copy code The code is as follows:

2. Insert the corresponding HTML code block. This example does not use recursion to generate code, but uses a static three-level structure, which makes it look clearer. In a real production environment, it is recommended to use recursion to produce the menu

Copy code The code is as follows:

    @foreach (var item in Model)
    {
        if (item.Sons != null && item.Sons.Count > 0)
        {
               
       

• 
              @item.MenuName
             
  
                  @foreach (var sub in item.Sons)
                  {
                      if (sub.Sons != null && item.Sons.Count > 0)
                      {

                     

  • 
                            @sub.MenuName
                           
    
                                @foreach (var inner in sub.Sons)
                                {
                                   
    • 
                                          @inner.MenuName
                                     
    
                                }

                           

    
                       
  
                     

                      }

  else
                                                                 {
                                                                                                                                                                                                                        

  • @sub.MenuName
  
                   }
                  }
                                                    
  
                                                                                          }
          else
             {
                                                                                                                             }
  }
  

The final effect is the first picture. It is worth noting that if you want to use dividing lines between each menu, you can add the line of code

.

Thank you for reading! Article source Zhang Zhanling