Twitter Bootstrap 2에서 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?

Twitter Bootstrap 2로 다단계 드롭다운 메뉴 만들기

Twitter Bootstrap 2는 강력한 구성 요소 세트를 제공하지만 다단계 드롭다운 메뉴는 기본적으로 지원되지 않습니다. . 이 문제는 GitHub 커뮤니티 내에서 우려를 불러일으켰고 많은 개발자가 대체 솔루션을 찾게 되었습니다.

이 제한 사항을 해결하기 위해 다음 CSS 코드를 구현할 수 있습니다.

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

이 CSS를 추가하여 애플리케이션에 추가 레벨을 포함하도록 표준 드롭다운을 확장할 수 있는 사용자 정의 .sub-menu 클래스를 생성할 수 있습니다. 하위 메뉴의 위치와 가시성은 CSS를 통해 제어할 수 있습니다.

이 솔루션은 다단계 드롭다운에 대한 기본 지원을 도입한 Bootstrap 버전 3 이전에 만들어졌습니다. Bootstrap 버전 2를 사용하는 경우 이 솔루션은 유사한 기능을 달성하는 데 적합합니다. 그러나 Bootstrap 버전 3 이상에서는 이 솔루션을 더 이상 사용할 필요가 없습니다.

위 내용은 Twitter Bootstrap 2에서 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!