web-dev-qa-db-ja.com

Twitter bootstrapサブメニューを左側に開く方法は？

ドロップダウンメニューにTwitter bootstrapサブメニューを作成しようとしていましたが、問題があります。ページの右上隅にドロップダウンメニューがあり、そのメニューにはもう1つのサブメニューがあります。ただし、サブメニューが開くと、ウィンドウに収まらず、右に移動しすぎるため、ユーザーは最初の文字しか見ることができません。そのサブメニューを右ではなく左に開くようにするにはどうすればよいですか？

javascriptjquerycsstwitter-bootstrap
89
kovpack

最も簡単な方法は、pull-leftクラスをdropdown-submenuに追加することです

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

jsfiddle： DEMO

107
Schmalzy

私がこの権利を理解していれば、bootstrapはまさにこの場合のCSSクラスを提供します。 「ul」メニューに「pull-right」を追加します。

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

..そして最終的な結果は、メニューオプションがドロップダウンするボタンに合わせて右揃えで表示されることです。

114
Matt

現在のクラス.dropdown-submenu > .dropdown-menuにはleft: 100%;があります。したがって、左側のサブメニューを開く場合は、これらの設定を負の左位置にオーバーライドします。たとえば、left: -95%;。これで、左側にサブメニューが表示され、他の設定を微調整して完全なプレビューを取得できます。

DEMO です

編集：OPの質問と私の答えは2012年8月からです。その間、Bootstrapが変更されたため、.pull-leftクラスができました。当時、私の答えは正しかった。これで、CSSを手動で設定する必要はありません。その.pull-leftクラスがあります。

EDIT 2：BootstrapがURLを変更したため、デモは機能しません。 jsfiddleで外部リソースを変更し、新しいリソースに置き換えるだけです。

25
Miljan Puzović

bootstrap v4を使用している場合、新しい方法があります。

.dropdown-menu-right要素で.dropdown-menuを使用する必要があります。

コードへのリンク： http://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment

16
Felipe Miosso

タスクを実行する正しい方法は次のとおりです。

/* 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; }
12
Ruslan Sukhar

レベルが1つだけで、bootstrap 3を使用する場合は、ul要素にpull-rightを追加します

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

右側に十分なスペースがあるかどうかを調べるjavascript関数を作成しました。それがあれば、彼はそれを右側に表示し、そうでなければ彼はそれを左側に表示します

テスト済み：

  • Firefox（mac）
  • Chorme（mac）
  • Safari（Mac）

Javascript：

$(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">

これがあなたの役に立つことを願っています。

追伸サファリとクロームの小さなバグ。最初のホバーで左に移動すると、この投稿が修正されればこの投稿が更新されます。

4
Mitchel Verschoof

実際、dropdownラッパーをフローティングしても問題ない場合は、dropdownにnavbar-rightを追加するのと同じくらい簡単であることがわかりました。

これは不正行為のように思えます。これはnavbarにはないためですが、私にとってはうまくいきます。

<div class="dropdown navbar-right">
...
</div>

その後、dropdownで直接pull-leftを使用してフローティングをさらにカスタマイズできます...

<div class="dropdown pull-left navbar-right">
...
</div>

...またはその周りのラッパーとして...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>
1
zeroasterisk

右側に十分なスペースがあるかどうかを調べるjavascript関数を作成しました。持っている場合は右側に表示され、そうでない場合は左側に表示されます。また、右側に十分なスペースがある場合は、右側に表示されます。それはループです...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

}）;

1
SUAT SUPHI

ブートストラップの最新バージョンを使用していますか？以下に示すように、 流体レイアウトの例 からhtmlを適合させました。ドロップダウンを追加し、pull-rightクラスを追加して右側に配置しました。ドロップダウンメニューの上にマウスを移動すると、自動的に左に引っ張られ、何も隠されません-すべてのメニューテキストが表示されます。カスタムCSSは使用していません。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-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>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>
0
Nick

LESS CSSを使用している場合、接続矢印でドロップダウンを移動するための小さなmixinを作成しました。

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

次に、たとえば.dropdown-menuのIDを持つdropdown-menu-xを移動するには、次のようにします。

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}
0
isapir