부트스트랩~다단계 네비게이션(계단식 네비게이션) 구현 효과 [코드 포함]_javascript 기술

Bootstrap 관계자에 따르면 내비게이션은 최대 2개의 레벨만 가질 수 있으며 2개 이상의 레벨을 달성하는 것은 불가능합니다. 삼촌은 타사 정보를 검색하다가 마침내 좋은 플러그인을 찾았는데 둘 다 좋습니다. 사용 및 효과가 이제 모두와 공유됩니다

플러그인 주소: http://vsn4ik.github.io/bootstrap-submenu/

삼촌 배경 시스템의 표시 효과를 살펴보겠습니다

구현 방법에 대해 이야기해보겠습니다

1 세 개의 JS 플러그인 및 CSS 클래스 라이브러리에 대한 참조

코드 복사 코드는 다음과 같습니다.

2. 해당 HTML 코드 블록을 삽입합니다. 이 예제에서는 코드를 생성하기 위해 재귀를 사용하지 않고 정적 3단계 구조를 사용하므로 실제 제작 환경에서는 재귀를 사용하여 메뉴를 생성하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

    @foreach(모델의 변수 항목)
    {
        if (item.Sons != null && item.Sons.Count > 0)
        {
               
       

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

                    

  • 
                            @sub.MenuName
                           
    
                                @foreach(sub.Sons의 내부 변수)
                                {
                                   
    • 
                                          @inner.MenuName
                                     
    
                                }

                          

    
                       
                       

                     }

  그밖에
                                                            {
  ~ | 이름
                   }
                  }
  ~ > }
          그 외
              {
  ~ }
  }
  

  
  
  
  최종 효과는 첫 번째 사진입니다. 각 메뉴 사이에 구분선을 사용하려면
코드 줄을 추가하면 됩니다.

읽어주셔서 감사합니다! 기사 출처 장잔링