> 웹 프론트엔드 > CSS 튜토리얼 > Twitter Bootstrap 2에서 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?

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

Mary-Kate Olsen
풀어 주다: 2024-11-27 02:49:10
원래의
253명이 탐색했습니다.

How Can I Create Multilevel Dropdown Menus in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿