Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Bootstrap~The implementation effect of multi-level navigation (cascading navigation) [with code]_javascript skills

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

WBOY
Release： 2016-05-16 15:11:38
Original
1193 people have browsed it

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

    Related labels：
    bootstrap Multi-level navigation navigation
    source：php.cn
    Previous article：JavaScript implements conversion between strings and dates and date formatting_javascript skills Next article：Obtaining radio-select, multi-select, and selection box values ​​in js form processing and serializing the form_javascript skills
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
    From 2024-04-06 21:58:04
    0
    1
    800
    How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
    From 2024-04-06 20:22:15
    0
    1
    454
    Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
    From 2024-04-06 12:53:11
    0
    1
    376
    Bootstrap switch not working properly when web page is resized This is the code: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security&q...
    From 2024-04-05 08:45:39
    0
    1
    3443
    Display AWS PDF files in Bootstrap mode in Laravel I have downloaded aws url like https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65...
    From 2024-04-04 22:16:18
    0
    1
    1450
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template