[javascript] 트위터 부트 스트랩 하위 메뉴를 왼쪽에서 여는 방법은 무엇입니까?

Program / 글쓴이

드롭 다운 메뉴에서 트위터 부트 스트랩 하위 메뉴를 만들려고했지만 문제가 있습니다. 페이지의 오른쪽 상단에 드롭 다운 메뉴가 있고 해당 메뉴에 하위 메뉴가 하나 더 있습니다. 그러나 하위 메뉴가 열리면 창에 맞지 ​​않고 오른쪽으로 너무 많이 이동하여 사용자가 첫 글자 만 볼 수 있습니다. 하위 메뉴가 오른쪽이 아닌 왼쪽으로 열리도록 만드는 방법은 무엇입니까?

답변

가장 간단한 방법은 pull-left클래스를 추가하는 것입니다.dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle : 데모

답변

이 권리를 이해했다면 부트 스트랩은이 경우에만 CSS 클래스를 제공합니다. 메뉴 ‘ul’에 ‘pull-right’추가 :

<ul class="dropdown-menu pull-right">

.. 그리고 최종 결과는 메뉴 옵션이 드롭 다운되는 버튼과 나란히 오른쪽 정렬되어 나타납니다.

답변

Curent 클래스 .dropdown-submenu > .dropdown-menu는 left: 100%;. 따라서 왼쪽에 하위 메뉴를 열려면 해당 설정을 음수 왼쪽 위치로 재정의하십시오. 예를 들면 left: -95%;. 이제 왼쪽에 하위 메뉴가 표시되고 다른 설정을 조정하여 완벽한 미리보기를 얻을 수 있습니다.

여기 데모입니다

편집 : OP의 질문과 내 대답은 2012 년 8 월부터입니다. 한편, 부트 스트랩이 변경되었으므로 이제 .pull-left 클래스가 있습니다. 그 당시 제 대답은 맞았습니다. 이제 수동으로 CSS를 설정할 필요가 없으며 .pull-left 클래스가 있습니다.

편집 2 : Bootstrap이 URL을 변경했기 때문에 데모가 작동하지 않습니다. jsfiddle에서 외부 리소스를 변경하고 새 리소스로 교체하십시오.

답변

부트 스트랩 v4를 사용하는 경우이를 수행하는 새로운 방법이 있습니다.

요소 .dropdown-menu-right에 사용해야합니다 .dropdown-menu.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

코드 링크 : https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

답변

작업을 수행하는 올바른 방법은 다음과 같습니다.

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

답변

오른쪽에 충분한 공간이 있는지 확인하는 자바 스크립트 함수를 만들었습니다. 있는 경우 오른쪽에 표시하고 그렇지 않으면 왼쪽에 표시합니다.

테스트 :

  • Firefox (mac)
  • Chorme (맥)
  • Safari (Mac)

자바 스크립트 :

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

새 클래스를 만든 모든 메뉴 항목에이 수정 사항을 추가하고 싶지 않기 때문입니다. ul에 고정 메뉴 배치 :

<ul class="dropdown-menu fixed-menu">

나는 이것이 당신을 위해 잘되기를 바랍니다.

추신. 사파리와 크롬의 작은 버그, 첫 번째 호버는 왼쪽으로 mutch에 배치하면 수정하면이 게시물을 업데이트합니다.

답변

레벨이 하나만 있고 부트 스트랩 3을 사용 pull-right하는 경우 ul요소에 추가

<ul class="dropdown-menu pull-right" role="menu">