트위터 부트스트랩의 마우스 오버 활성화 드롭다운 메뉴

많은 사용자는 부트스트랩 메뉴가 마우스를 올리면 드롭다운되는 것을 선호하므로 명시적인 클릭이 필요하지 않습니다. . 이 문서에서는 마우스 오버 기능과 메뉴 제목 옆의 화살표 아이콘 제거에 대해 다룹니다.

마우스 활성화 드롭다운

마우스 오버 시 자동 드롭다운을 활성화하려면 CSS를 활용하여 다음을 수행하세요. 숨겨진 메뉴 옵션을 타겟팅합니다. CSS에 다음 코드를 추가합니다.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

반응형 디자인의 경우 코드를 미디어 쿼리로 래핑합니다.

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

화살표 아이콘 제거

• Bootstrap 3: .dropdown-toggle 앵커 요소에서 HTML 를 제거합니다.
• Bootstrap 2 & Lower: 이 CSS를 사용하여 화살표를 타겟팅하고 제거합니다. selector:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

이러한 CSS 수정 사항을 통합하면 마우스 오버로 활성화되는 드롭다운 메뉴를 구현하고 화살표 아이콘을 제거하여 사용자 경험을 향상하고 부트스트랩 메뉴를 원하는 대로 맞춤 설정할 수 있습니다.