[css] 클릭하지 않고 호버에서 Twitter 부트 스트랩 메뉴 드롭 다운을 만드는 방법

Program / 글쓴이

메뉴 제목을 클릭하지 않고 마우스 포인터로 Bootstrap 메뉴가 자동으로 드롭 다운되도록하고 싶습니다. 메뉴 제목 옆에있는 작은 화살표를 잃고 싶습니다.

답변

여러 하위 메뉴를 지원하는 최신 (v2.0.2) 부트 스트랩 프레임 워크를 기반으로 한 순수한 마우스 오버 드롭 다운 메뉴를 만들었으며 다음 사용자를 위해 게시 할 것이라고 생각했습니다.

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

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

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

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

스 니펫 확장

데모

답변

메뉴가 자동으로 호버링되도록하려면 기본 CSS를 사용하면됩니다. 숨겨진 메뉴 옵션에 대해 선택기를 실행 한 다음 적절한 li태그를 가리킬 때 블록으로 표시되도록 설정해야합니다 . 트위터 부트 스트랩 페이지에서 예제를 선택하면 선택기는 다음과 같습니다.

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

그러나 Bootstrap의 반응 형 기능을 사용하는 경우 축소 된 탐색 표시 줄 (더 작은 화면)에서이 기능을 원하지 않습니다. 이를 피하려면 위 코드를 미디어 쿼리로 감싸십시오.

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

화살표 (캐럿)를 숨기려면 Twitter Bootstrap 버전 2 이하를 사용하는지 또는 버전 3을 사용하는지에 따라 다른 방식으로 수행됩니다.

부트 스트랩 3

버전 3에서 캐럿을 제거하려면 anchor 요소 <b class="caret"></b>에서 HTML을 제거하면됩니다 .dropdown-toggle.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

부트 스트랩 2 이하

버전 2에서 캐럿을 제거하려면 CSS에 대한 통찰력이 필요하며 :after의사 요소가 어떻게 작동하는지 자세히 살펴 보는 것이 좋습니다 . 트위터 부트 스트랩 예제에서 화살표를 대상으로하고 제거하기 위해 이해하기 시작하려면 다음 CSS 선택기 및 코드를 사용하십시오.

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

당신이 이것들이 어떻게 작동하는지 더 자세히 살펴보고 내가 당신에게 주어진 대답을 사용하지 않는다면 그것은 당신에게 유리할 것입니다.

부모 호버에 하위 메뉴가 표시되지 않도록하기 위해 “>”하위 콤비 네이터가 누락되었음을 지적한 @CocaAkat에게 감사합니다.

답변

“나의 머리가 아프다”(대단한)의 답변 외에도 :

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

남아있는 두 가지 문제가 있습니다.

  1. 드롭 다운 링크를 클릭하면 드롭 다운 메뉴가 열립니다. 그리고 사용자가 다른 곳을 클릭하거나 뒤로 마우스를 가져 가면 어색한 UI가 생성되지 않는 한 열려 있습니다.
  2. 드롭 다운 링크와 드롭 다운 메뉴 사이에 1 픽셀의 여백이 있습니다. 드롭 다운 메뉴와 드롭 다운 메뉴 사이를 천천히 이동하면 드롭 다운 메뉴가 숨겨집니다.

(1)에 대한 해결책은 탐색 링크에서 “class”및 “data-toggle”요소를 제거하는 것입니다.

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

또한 기본 구현으로는 불가능했던 부모 페이지에 대한 링크를 만들 수 있습니다. “#”을 사용자를 보내려는 페이지로 바꿀 수 있습니다.

(2)에 대한 해결책은 드롭 다운 메뉴 선택기에서 여백을 제거하는 것입니다.

.navbar .dropdown-menu {
    margin-top: 0px;
}

답변

나는 약간의 jQuery를 사용했다.

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

답변

여기에는 정말 좋은 솔루션이 많이 있습니다. 그러나 나는 다른 대안으로 여기에 내 것을 넣을 것이라고 생각했습니다. 단순히 클릭 대신 드롭 다운에 대한 호버를 지원하면 부트 스트랩이하는 방식을 수행하는 간단한 jQuery 스 니펫입니다. 나는 이것을 버전 3으로 만 테스트 했으므로 버전 2에서 작동하는지 알 수 없습니다. 편집기에서 코드 조각으로 저장하고 키를 눌렀을 때 사용하십시오.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

기본적으로 드롭 다운 클래스에 마우스를 올리면 열린 클래스가 추가됩니다. 그런 다음 작동합니다. 드롭 다운 클래스가있는 상위 li 또는 하위 ul / li에 마우스를 올리면 열린 클래스가 제거됩니다. 분명히 이것은 많은 솔루션 중 하나 일 뿐이며 특정 .dropdown 인스턴스에서만 작동하도록 추가 할 수 있습니다. 또는 부모 또는 자식으로 전환을 추가하십시오.

답변

세 줄의 코드로 CSS 스타일을 간단히 사용자 정의하십시오.

.dropdown:hover .dropdown-menu {
   display: block;
}

답변

dropdown이 클래스와 같은 요소가있는 경우 (예 🙂

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

그런 다음 jQuery 코드 스 니펫을 사용하여 제목을 클릭하지 않고 드롭 다운 메뉴가 자동으로 드롭 다운되도록 할 수 있습니다.

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

여기 데모가 있습니다

이 답변은 @Michael answer에 의존 하고 드롭 다운 메뉴가 제대로 작동하도록 변경하고 추가했습니다.