호버에서 부트스트랩 드롭다운을 활성화하고 화살표를 제거하려면 어떻게 해야 합니까?

호버링 가능한 부트스트랩 메뉴 드롭다운

부트스트랩 메뉴 드롭다운 주제를 확장하여 이 기사에서는 동작과 모양을 사용자 정의하는 방법을 자세히 설명합니다. 특히 메뉴 활성화를 위해 클릭하고 그에 따른 화살표를 제거하는 대신 마우스 오버를 활성화하는 방법을 탐색합니다.

호버에 대한 자동 드롭다운

에 대한 자동 메뉴 드롭다운을 구현하려면 hover, CSS 수정이 필요합니다. 숨겨진 메뉴 옵션을 대상으로 하고 해당 목록 항목 위에 마우스를 올렸을 때 이를 블록으로 표시하면 원하는 기능이 달성됩니다. Bootstrap 문서에서 다음 예를 고려하십시오.

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

반응형 고려 사항

Bootstrap의 반응형 기능을 사용하는 경우 축소된 탐색에 자동 드롭다운 기능이 바람직하지 않을 수 있습니다. 작은 화면에는 막대가 표시됩니다. 이 문제를 해결하기 위해 CSS 코드를 미디어 쿼리 내에 포함할 수 있습니다.

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

화살표(캐럿) 제거

드롭다운 화살표 숨기기는 버전에 따라 다릅니다. 부트스트랩을 활용합니다.

부트스트랩 3

Bootstrap 3의 경우 .dropdown-toggle 앵커 요소에서 HTML 요소 를 제거하면 됩니다.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <!-- remove this line -->
</a></p>
<p><strong>Bootstrap 2 이하</strong></p>
<p>Bootstrap 2 및 이전 버전에서는 CSS 선택기와 아래 코드를 사용하여 다음을 수행할 수 있습니다. 화살표 제거:</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

결론

호버에서 활성화되도록 Bootstrap 메뉴 드롭다운을 사용자 정의하고 화살표를 제거하면 사용자 경험과 미적 선호도가 향상됩니다. 기본 CSS 원칙을 이해하면 개발자가 프로젝트에서 이러한 수정 사항을 원활하게 구현할 수 있습니다.

위 내용은 호버에서 부트스트랩 드롭다운을 활성화하고 화살표를 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!